首页 > 代码库 > bootstrap自学总结不间断更新
bootstrap自学总结不间断更新
2.栅格系统
container-fluid 自适应宽度100%
container 固定宽度（适应响应式）
屏幕宽度=x x>=1200 1170
992<=x<1200 970
768<=x<992 750
x<=768 auto
注意这俩个class不能放在一起，也就是说不能相互嵌套
如果不想让宽度随着屏幕而变化，可以给他一个!important来提高优先级这样在所有尺寸下都是一个值
3.栅格布局
row 代表一行，并且自带清除浮动
col-lg/md/sm/xs 代表列
数字 不能超过12，
如果列的和超过12，那就会换行
如果一列数字超过12，那就按12显示
4.屏幕尺寸
lg 宽度>1200
表现形式：并木的宽度大于1200，一行显式n列
屏幕的宽度小于1200，一行显式一列
md 宽度大于992小于1200同理
sm 宽度大于768小于992同理
xs 跨度小于768 一行永远显示n列
5.列偏移
col-lg-offset-(偏移的格子数量)
当偏移的格子数量超过12时会不起作用
------------------------------------------
6.列排序与嵌套
列排序
col-lg-push-10 列往右走
push 往右走
数字 往右走的格子数
数量超过12时会不起作用
col-lg-pull-10 列往左走
pull 往左走
数字 往左走的格子数
数量超过12时会不起作用
列偏移与列排序的区别
1.列偏移只能向右走，列排序可以向右走也可以向左走
2.当offset偏移后其位置超过12列，则会跳到下一行在下一行进行相同的偏移。而push不会换行。
嵌套
每一列里都可以嵌套一行和最对12列，嵌套的元素以父级的宽度为基准，在分12个格子。
------------------------------------------
7.特殊标签以及样式
------------------------------------------
8.表格相关样式
table table-triped table-bordered table-condensed table-hover
table-responsed
active success warning danger info
------------------------------------------
9.表单
form-control form-inline form-group form-horizontal control-label checkbox checkbox-inline rodio-inline
12.按钮
<button type="button"></button>
<a href="http://www.mamicode.com/#"></a>
尺寸和颜色
class="btn btn-default btn-lg"
class="btn btn-primary btn-md"
class="btn btn-success btn-sm"
class="btn btn-info btn-xs"
让按钮宽度变为100%，并成为块级元素
btn-block
让按钮成为激活状态，就是有一个内影。
active
让按钮成为激活状态，就是有一个内影。
disabled
关闭按钮
<button class="close">×</button>
13.响应式图片
img-responsive 响应式图片
img-rounded 图片变成有小圆角
img-circle 裱成圆形
img-thumbnail 带圆角边框
14.辅助类样式
字体颜色
text-muted 变成微灰色
text-primary 变成淡蓝色
text-success 变成绿色
text-info 变成深蓝色
text-warning 变成橘黄色
text-danger 变成红色
字体的背景
bg-primary
bg-success
bg-info
bg-warning
bg-danger
三角符号
caret
左浮动
pull-left
右浮动
pull-right
居中对齐
center-block
隐藏于显示
show
hidden
invisible
15响应式工具
针对不同的宽度，展示或隐藏相关内容
visible-lg/md/sm/xs-block/inline-block/inline
hidden-lg/md/sm/xs-block/inline-block/inline
16.打印样式
<只>在打印的时候显示
visible-print-block/inline/inline-block
打印的时候隐藏
hidden-print-block/inline/inline-block
注意：
17.按钮组
btn-group 按钮组
btn-group-lg/md/sm/xs 改变按钮的尺寸
btn-group-vertical 按钮竖着排
btn-group-justified 让按钮俩端对其
注意：如果btn-group-vertical的子元素如果是button标签或者是input标签需要加一个带btn-group的div，不然会出问题。不过a标签就不会。
给按钮添加三角形
<a href="http://www.mamicode.com/#" class="btn btn-primary">按钮<span class="caret"></span></a>
dropup 倒置三角也就是变成上拉菜单。
18.下拉菜单
1.给父级添加一个dropdown，或者给父级添加定位属性
2.给button添加一个data-toggle="dropdown"的属性，并且加一个dropdown-toggle的class
3.ul需要添加一个dropdown-menu的class
19.下拉菜单样式
open：默认菜单时展开的，给dropdown添加
pull-right/left
btn-block：让btn铺满。
dropup：让菜单在上面显式。
dropdown-header：菜单里的标题，给li添加
text-center：居中
divider：分割线
disabled
20.导航
nav 导航的基础样式
nav-tabs table标签页
nav-pills 胶囊式
nav-stacked 让导航竖着排并沾满基于pills
nav-justified 一行铺满基于pills
21.选项卡
1.导航对应的所有内容需要放到一个class为tab-content的层理面
2.每一个内容块都要加上一个名为tab-pane的class，并且给对应的默认显示的内容添加一个active的class
3.给每一个导航的a标签加一个data-toggle="tab"
4.给每一个内容添加一个id
5.给每一个导航的a标签添加一个锚点。
22.导航条
navbar 导航条的基础样式，给nav标签
nav navbar-nav 导航条里菜单的固定样式组合class，给ul标签
navbar-default 导航条的默认样式，给nav标签 navbar-inverse 与navbar-default相对，它是黑色的样式。
navbar-static-top 使导航条变成直角，给nav标签
navbar-fixed-top/bottom 使导航条固定在窗口上，给nav标签,需要给body设一个padding，让出上面的位置。
navbar-header 导航的头部，一般情况下来访logo，作为a标签的外包div
navbar-brand 用来放logo的，给a标签用需要配合navbar-header来使用。
注意：需要把nav标签放在container的外面。防止在缩小页面的时候会出现变长的情况。
navbar-left:表示内容左对齐
navbar-right:表示内容右对齐
navbar-link：针对导航条中的链接，让链接中的文字颜色变得和导航颜色一致。给a标签使用
navbar-text：在导航当中加入一段文字，但是文字没有垂直居中，这时候使用它。用于a，p标签
navbar-btn：如果导航里只有一个按钮，那给他加一个navbar-btn，才能使他居中。
注意：如果导航中有form，那就需要给form添加一个navbar-form，想让他们在一行显示，就要添加一个navbar-left
23.路径导航与分页
breadcrumb：面包屑导航，给ul标签呈现html\css\js这种样式。
分页：
pagination：给ul标签pagination-lg/md/sm,没有xs的。
翻页：
pager：给ul标签
←上一页→下一页 previous：在右侧，表示上一页，给li
next：在左侧，表示下一页，给li
24.标记与巨幕
标记：
badge：有一个背景色，用于数字，给span标签
巨幕：
jumbotron：有巨大的背景图，和导航一样，如果想让巨幕铺满整个屏幕，让jumbotron在container外面就行了。用于div
25.缩略图与警告框
缩略图：
thumbnail：给a标签，一般是a中有一个很大的img，用过之后给图片加上圆的白色边框和边距。
caption：给div，可以加一些内边距。
警告框：alert:给p标签使用，加背景颜色用alert-success/info/warning/danger
<button class="close" data-dismiss="alert">×</button>
26.进度条
progress：外面的div用
progress-bar：里面的div用，但是需要给他一个宽度，progress-bar-info/warning/success
注意：想有动态的进度条给里面的div加progress-bar-striped（这是一个样式）和active就ok了。
27.图文混排
media 图文混排 外层div
media-left 图片在左侧显示 带img的a标签
media-right 图片在右侧显示 带img的a标签
media-middle 图片垂直中间对齐 带img的a标签
media-bottom 图片垂直底部对齐 带img的a标签
media-body 内容区域
media-heading 内容区域的标题黑h1等标签使用。
28.列表组
list-group：列表组，给ul添加
list-group：列表项，给li添加
注意：给每个列表项添加一个标记，那这个标记就会自动跑到右侧。
用a标签做的列表组，可以添加激活状态，禁用状态，背景色都可以添加
添加标题与段落的列表组
列表则标题：list-group-item-heading
列表组内容：list-group-item-text
29.面板
panel：面板
panel-heading：面板的头部
panel-body：面板的内容
panel-default：面板默认样式
panel-title：面板头部区域标题的样式
panel-primary：蓝色的头部
panel-success：绿色的头部
30.弹出层
注意：
1.弹出层必须放在body里
2.弹出层里面不能在嵌套别的层
3.弹出层出来以后，页面的滚动条会被覆盖。
结构
modal弹出层父级
modal-dialog弹出层
modal-content弹出层内容区域
modal-header弹出层头部
modal-body弹出层主体
modal-footer弹出层底部
fade 让弹出层有一个运动的效果,给modal添加
modal-lg/md/sm/xs是用来设置弹出层的尺寸，他必须给modal-dialog的层。
31.滚动监听
1.谁要滚动就要给他添加data-spy="scroll"
并且需要添加一个data-target，这个值要与导航的父级相关联
2.给导航的父级添加一个id或者class，要与要滚动的元素的data-target相关联，并且要添加一个navbar-collapse
3.导航里面的每个a标签都需要添加上一个锚链接，这样的话，才能与滚动对上号。
4.果冻区域的内容的标题要添加上相应的id，用于导航的锚链接对应。
32.提示标签
a标签class=‘tool‘ data-placement=‘left/right/botton/top‘ title=‘要显示的内‘
js
$(‘.tool).tooltip();
$(‘.tool).tooltip(‘show‘);想让他之前就显示出来
32.提示框
1.给要点击的那个元素添加一个data-toggle=‘collapse’，并且需要给他添加一个data-target，让他的值与对应的内容区域的id或者class相同
2.给对应的内容区域加一个id或者class，与点击的元素相对应
3.注意
1.内容区域不能有padding的值，
33.提示框组
1.把所有的面板都放在一个父级里，并且给父级添加一个panel-group，还有一个id
2.给药电机的元素添加一个data-parent属性，并让他的值与父级的id一样
3.需要给内容区域添加一个class为collapse
bootstrap自学总结不间断更新