bootstrap框架主体为一行十二列 对着标签的class选择器添加属性
container为固定宽度的框container-fluid为百分比的框
row为创建新的一行 一行最多12列 多余的自动换行
col-在xxx尺寸-几列 最常用 用于设置div的大小 这个属性为row的子属性
使用col-xxxx-offset-xxxx类可以将列向右偏移,例如,col-xs-offset-4表示在超小屏幕上时,将元素向右偏移4列。
在一个row中嵌套row为新建一行新的12列
使用时需要先加载css文件 其中有需要js文件的内容比如轮播图和监听
加载js前需要加载jq框架提供的js文件是jq写出来的
我个人理解的框架为给class选择器添加各种类 命名为添加的属性+属性的需求
.table 表格必须的基类
.table-bordered 带边框的表格
.table-striped 带条纹的表格(隔行变色)
.table-hover 鼠标悬浮时为整行添加背景色
.table-condensted 紧凑的表格(减少了单元格padding)
当屏幕宽度不足以显示所有的表格内容时,表格内容会出现折叠甚至溢出的现象。为了解决这个问题,我们可以将.table元素放到一个具有.table-responsive类的元素内容。
可以理解为响应式结构为属性+responsive
按钮有4个属性标签有7个样式4个大小
btn btn-default
btn btn-primary
btn btn-success
btn btn-danger
4个属性
btn-primary
btn-success
btn-danger
btn-warning
btn-info
btn-link
6个样式
lg大 默认中 sm小 xs超小
图片有3个属性
.img-rounded 圆角的图片
.img-circle 圆形图片
.img-thumbnail 缩略图
框架提供的文本颜色分为6类
text-muted
text-primary
text-success
text-info
text-warning
text-danger
背景颜色有5种
bg-primary
bg-success
bg-info
bg-warning
bg-danger
为元素添加.pull-left或.pull-right可以让元素左右浮动;为浮动元素的父元素添加.clearfix就可以清除浮动。
hidden-xs 只有在超小屏幕上时隐藏
hidden-sm 只有在小屏幕上时隐藏
hidden-md 只有在中等屏幕上时隐藏
hidden-lg 只有在大屏幕上时隐藏
visible-xs-* 只有在超小屏幕上时才显示,在其他尺寸的屏幕上一律隐
visible-sm-* 只有在小屏幕上时才显示,在其他尺寸的屏幕上一律隐藏
visible-md-* 只有在中等屏幕上时才显示,在其他尺寸的屏幕上一律隐藏
visible-lg-* 只有在大屏幕上时才显示,在其他尺寸的屏幕上一律隐藏
星号(*)可以有3中取值,分别是
block 以块元素的形式显示
inline 以行内元素的形式显示
inline-block 以行内块元素的形式显示
center-block为块元素居中 在子元素中使用可以居中在父元素中
在button的class选择器内添加data-toggle=“modal” 表示按钮是用来切换模态框的显示和隐藏
data-target="#mymodal" 表示按钮切换的目标模态框是谁,这里是ID属性为mymodal的模态框
data-dismiss=“modal” 表示该按钮具有关闭模态框的功能
modal-有3个属性 lg 默认和 xs 对应大中小
id=“mycarousel” 轮播的ID
data-interval=“3000” 控制图片轮播的速度
data-pause=“hover” 鼠标悬浮到图片上时,是否暂停轮播
data-keyboard=“true” 是否能可以用键盘的左右键控制轮播
data-wrap=“true” 是否循环轮播