Bootstrap初学基础总结

1>Bootstrap需要导入的文件

???1.在head标签中，通过link导入bootstrap.css样式表（核心文件，必须导入）

???2.如果使用bootstrap的交互功能和插件需要导入

???????A) jquery.js

???????B) bootstrap.js

2>Bootstrap?容器

?.container ??宽度是“固定”（不同浏览器窗口宽度对应不同的尺寸）居中

?.container-fluid ?100% ?两侧有边距

??如果没有特殊情况，所有内容都应该放在容器中

?

3>导航条??navbar ?

1.两种配色

default（浅色系）??navbar navbar-default

?

inverse（深色系）?navbar navbar-inverse

?

?

2.行为 ?

A.默认（圆角，随页面滚动）

B.固定（直角，100%，可以固定在顶部或底部）navbar navbar-default navbar-fixed-top/bottom???C.静态（直角，100%，随页面滚动）?navbar navbar-default navbar-static-top

?

4>表格?table

??1.形态

??????默认：只有表格行下横线，表头文字加粗

?

????

??交替：.table-striped?类可以给?<tbody>?之内的每一行增加斑马条纹样式。

?

???

???边框：添加?.table-bordered?类为表格和其中的每个单元格增加边框，同时有竖线。

?

????

??紧凑：通过添加?.table-condensed?类可以让表格更加紧凑，单元格中的内补（padding）均会减半

?

?

悬停：通过添加?.table-hover?类可以让?<tbody>?中的每一行对鼠标悬停状态作出响应

?

响应式表格（手机模式）：将任何?.table?元素包裹在?.table-responsive?元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于?768px?宽度时，水平滚动条消失。

>按钮?btn

???颜色

?

<button?type="button"?class="btn btn-default">（默认样式）白色Default??</button>

<button?type="button"?class="btn btn-primary">（首选项）深蓝Primary???</button>

<button?type="button"?class="btn btn-success">（成功）绿色Success???????</button>

<button?type="button"?class="btn btn-info">（一般信息）浅蓝Info????????</button>

<button?type="button"?class="btn btn-warning">（警告）橙色Warning????</button>

<button?type="button"?class="btn btn-danger">（危险）红色Danger??????</button>

<button?type="button"?class="btn btn-link">（链接）白色Link?????????????</button>

?

尺寸（主要是高度和文字大小）

??大号：btn-lg

??默认

??小号：btn-sm

??超小：btn-xs

?

形态

???默认：鼠标指向会变色

???按下：向下凹陷

?

???禁用：不会变色，鼠标指针会变成禁止图片，颜色发白，为?<button>?元素添加?disabled?属性，使其表现出禁用状态。

?

手机默认

????通过btn-block将按钮设置为宽度撑满容器100%

?????

8>表单

结构

??<form>

?????.form-group

??????????<label>

?????????????.form-control

?

?

?

形态

??默认：上下结构，form-group及其内部的label与form-control都是上下排列

?

?

?

??水平表单：form-group仍然是上下排列，但其内部的label与form-control是左右排列的

?

??

行内表单：左右结构，from-group及其内部全部左右排列

?

?

?导航条内表单：专门在导航条中使用

?

Bootstrap的单选框和复选框

?

???形态

??????垂直排列：

?????????Div.checkbox

?????????????Label

?????????????????Input[type=checkbox]

?

?

?

?

水平排列：

?

?

表单的3种状态?
1.焦点状态：我们将某些表单控件的默认?outline?样式移除，然后对?:focus?状态赋予?box-shadow?属性。

?

2.禁用状态：为输入框设置?disabled?属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了?not-allowed鼠标状态。

?

?

3.只读状态：为输入框设置?readonly?属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

?

?

表单控件的装饰

?????第一种：添加帮助文档

?

?????第二种：左侧addon

?????第三种：右侧加图标（通常用来做输入验证）

?

?

分页??pagination

???方形，有上一页，下一页，还有页码

?

?

翻页???pager

圆角，没有页码！可以水平居中或两端对齐

?

?

面板???.pannel

???????????.pannel-heading

???????????.pannel-body

????????圆角矩形区域，可以带标题栏，也可以不带

?

?

?

?

?

?

图标

Bootstrap自带图标，比较少

推荐使用font-awesome图标

????（需要css和fonts这两个文件夹，同时在页面上导入font-awesome.css）

<i class =”glyphicon glyphicon-图标名”>

<i class =”fa fa-图标名”

?

?

嵌套使用

??<a class=”btn btn-success”>

????<i class=”fa fa-图标名”>按钮

</a>

???<a class=”btn btn-success??fa fa-search”>按钮</a>

?

插件的使用规律

?????1.必须导入jquery.js和Bootstrap.js这个js脚本，否则 不能正常工作

?????2.插件可以通过html属性实现基本功能（如：打开、关闭，此时不需要写js代码）

?????3.如果想实现更多的控制，就需要写js

?

模态框

?????1.通过HTML属性控制模态框打开和关闭的重要属性

????????A.打开按钮上的2个

???????????????data-toggle=”modal”

???????????????data-target=”样式类或样式id”指定要打开的模态框

?

????????B.关闭：

????????????在模态框内部的任意按钮或标签上

??????????????data-dismiss=”modal”?会关闭当前所在的模态框

?????2.通过JavaScript调用，控制模态框的打开和关闭

????????使用$()找到模态框，然后调用modal()方法

???????????传入文档中指明的参数即可

????????只需一行?JavaScript?代码，即可通过元素的?id?myModal?调用模态框：

??????$(‘#myModal‘).modal(‘show‘)?????//打开

???????$(‘#myModal‘).modal(‘hide‘)?????//隐藏

?

?

??????3.模态框的基本样式

??????????.modol

??????????????.modol-dialog

???????????????????.modal-content

???????????????????????.modal-header

???????????????????????.modal-body

???????????????????????.modal-footer

?

下拉菜单

?

???????结构

???????????.dropdown

??????????????.btn ????按钮

??????????????????.caret ?下拉按钮图标

????????????????ul.dropdown-menu

基本不需要js控制

?

选项卡

??结构：

ul.nav.nav-tabs

???????li.active(激活)>a[href=#id][data-toggle=tab]

?

.tab-content

??????.tab-pane[id]

?

?

?

工具提示

???Tooltip/Popover弹出提示

?

?

?

因为性能原因默认没有激活，需要在页面底部加上相应方法调用初始化一下

???????

Bootstrap布局特性-栅格系统

1.容器.container被栅格系统平分成12份（12列）

2.通过col-lg/md/sm/xs-1（1-12）表示标签所占的份数

3.如果col-*-x中的x之和超过12则超过的标签换行

?

注意：

lg:表示宽屏桌面显示尺寸?>=1200px

md：方屏显示器的宽度 ?>=992px

sm:平板 ???????????????>=768px

xs：手机 ??????????????<768px

如果浏览器尺寸比col-[*]-1大，则指定的列有效

如果浏览器尺寸比col-[*]-1小，则指定的列无效，变成100%

?

4、.container这个容器左右各有15px的padding

????如果发现因为这15px的padding导致不能对齐

????则在.container中添加.row来抵消15px

<div?class="row"></div>

?

列的位置

????可以通过??col-*-pull-1 ?往左边拉

????可以通过??col-*-push-1?往右边推

????只在列有效时起作用！

?

???列的再拆分--列嵌套

在col-*-1中使用.row作为容器，可以再次拆分，使用.container不行！