Bootstrap的使用

发布时间：2020-12-17 20:58:21 所属栏目：安全来源：网络整理

导读：1.Bootstrap 简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。特点：移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式浏览器支持：所有的主流浏览器都支持 B

1.Bootstrap 简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
特点：
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案，还包含了功能强大的内置组件，易于定制，它还提供了基于 Web 的定制，并且它是开源的

2.Bootstrap使用：

今天主要学习了Bootstrap网格化和导航条表单按钮等组件的使用
首先：HTML5 的文档类型：
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。
格式如下：<!DOCTYPE html> <html lang="zh-CN"> ... </html>
然后因为Bootstrap移动设备优先，所以为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签：

<meta name="viewport" content="width=device-width,initial-scale=1">
如果你想禁止缩放（让用户只能滚动屏幕）那么：user-scalable=no 可以禁用其缩放
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

布局容器:
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,在Bootstrap有两个作此用处的类，不过要注意区分它们的不同，另外还需注意这两种容器类不能互相嵌套
其中：.container 类用于固定宽度并支持响应式布局的容器。

<div class="container"> ... </div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid"> ... </div>

栅格系统：
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）
通过“行（row）”在水平方向创建一组“列（column）”
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
具体使用可到Bootstrap中文网查看API
?
Bootstrap的组件：
Glyphicons 字体图标:使用Glyphicons 字体图标需注意：图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。而且图标类只能应用在不包含任何文本内容或子元素的元素上。
Bootstrap 假定所有的图标字体文件全部位于 ../fonts/ 目录内，相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置，那么，你需要通过下面列出的任何一种方式来更新 CSS 文件：
在 Less 源码文件中修改 @icon-font-path 和/或 @icon-font-name 变量。
利用 Less 编译器提供的相对 URL 地址选项。
修改预编译 CSS 文件中的 url() 地址。
当然我们最好不要修改了图标字体文件的位置。
例如：我的图标的一个应用：
<span class="glyphicon glyphicon-search"></span>
下拉菜单用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

<div class="dropdown"> 
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown 
    <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
<li><a href="#">Action</a></li> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></li> 
<li><a href="#">Separated link</a></li> 
</ul> 
</div>

你还可以改变上面代码的第一行的class为：dropup这样菜单会向上弹出
对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
添加标题：在下拉菜单中均可通过添加标题来标明一组动作。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3"> ... 
<li class="dropdown-header">Dropdown header</li> ... 
    
</ul>

还有很多很多的组件可以到Bootstrap中文网查阅 h t t p://w w w.bootcss.com/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!