bookstrap学习--基础篇

bookstrap学习

bookstrap的使用本质是就是给div标签打上一个个class,因为他已经封装了一个个的css样式，使用使用这个class，就可以展示不同的效果。

第一部分–基础

container-fluid

自适应宽度100%，用了之后div的左右各有一个padding为15px。

container

固定宽度（但这个固定不是定死了的意思，其实也是不固定的），但你的浏览器或者手机的屏幕宽度大于等于1200，那么固定宽度的值为1170，如果宽度大于992小于1200，那么固定宽度显示为970，如果大于768小于992，固定宽度为750，如果宽度小于768，那么他的固定宽度定义为auto。

注意

上面两种不是嵌套使用，可以兄弟级别使用，

如果不是让宽度随着屏幕而改变，可以用！important来提示优先级，这样就可以所有尺寸下都是固定宽度

row和col

row：代表一行

col-lg-1:代表列，其中数字1代表占了一个格子，改变数字就可以改变列的宽度。其中数字不能超过12，同时一行里面的所以列的数字加起来也不能超过12，否则就会被挤到下一行。如果一行中只有一列且这个数字超过12，就会按12来显示。

注意

col-lg-1,col-md-1,col-sm-1,col-xs-1

其中第二个单词lg代表着屏幕的尺寸大于1200，同时屏幕真的大于1200，一行可以展示N列，但如果屏幕实际没有1200，那么一行只有1列。

其中第二个单词md代表着屏幕的尺寸小于1200并大于992，同时屏幕大于992小于1200，一行可以展示N列，但如果屏幕实际没有大于992小于1200，那么一行只有1列。

其中第二个单词sm代表着屏幕的尺寸小于992并大于768，同时屏幕小于992并大于768，一行可以展示N列，但如果屏幕实际没有小于992并大于768，那么一行只有1列。

其中第二个单词xs代表着屏幕的尺寸小于768，同时屏幕小于768，一行可以展示N列,不会展示一行一列的效果。

组合模式

例子：class=“col-lg-3 col-md-4 col-sm-6”

这个例子的意思是一开始是一个lg屏幕宽时，一行有4列，其中div它占3格，当屏幕变小时，改用md，一行展示3列，每列占4格，当屏幕继续变小时，再改用sm，一行展示2列，每列占6格，最后再变小就可以不用xs了，因为sm屏幕小于768时，它自己就会展示一行一列。

列偏移col-lg-offset-4

因为一行被分为12列，同时采用float的left布局，所以我们不能直接让它前面空几个格子，这时我们可以采用列偏移col-lg-offset-4，让它偏移4个格子，直接在第5个格子展示。

col-lg-offset-4:

offset:往右偏移

4：数字，偏移的格子数，大于12会不起作用

列排序col-lg-push-10（同时也是组合模式使用）

col-lg-push-10:

push:往右走

数字：往右走的格子数，数字不能超过12，超过12不动，如果是12，就会移动12格，效果是消失了我们看不见。

col-lg-pull-10

pull:往左走

数字：往左走的格子数，数字不能超过12，超过12不动，如果是12，就会移动12格，效果是消失了我们看不见。

列偏移和列排序的区别

1.列偏移只能右走，列排序左右都可以走。

2.列偏移格子后超过12，会跳到下一行，对着下一行的头部进行相应的偏移，

但列排序不会跳到下一行，他会进行偏移，即使超过12格也会在同一行显示，效果是会超出格子。

特殊标签 pre

使用pre它里面的代码不会被解析，但在里面‘<’要用<代替，‘>’要用>代替。（这里看不懂点一次，md的格式很把一些效果直接展示出来）

例子：

<p>这里是一些正文</p>

特殊标签 kbd

使用它可以把一些组合键特殊标记出来

例子

ctrl+n

特殊标签 code

可以把一些单词或句子特殊标记出来，让他们有一个不同的背景色，可以与周围的东西不同。（注：里面的<>还是要用<>来代替）

例子

.meta

table表格

table:使用后表格每一行都会拉开距离同时每行之间会有1条横线隔开，同时修改一些简单的样式

table-striped:隔行变色

table-bordered:给表格添加边框

table-hover:给每一行添加一个hover状态，就是鼠标放上去那一行会有一个高亮的效果

table-condensed:让表格更加紧凑

table-responsive:在表格的外层div使用，使用后当表格屏幕尺寸小于768时，表格会有一个滚动条，可以保证不会随着宽度的变窄而把字体给挤成一个个。

在table里的tr，既行标签里加class=“active”,那一行会有一个灰色效果；加class=“success”,那一行会有一个绿色效果；加class=“warning”,那一行会有一个黄色效果；加class=“danger”,那一行会有一个淡红色效果；加class=“info”,那一行会有一个蓝色效果。

form表单

from-control：使用后表单的输入框变成一行，让表单的宽度为100%，同时修改一些样式。

form-gorup: 给表单之间添加了一些距离。

form-inline: 让表单一行中显示。

form-horizontal: 让表单在一行中显示，并且能改变form-group的样式。

conrtol-label: 让label里的文字垂直居中对齐

checkbox: checkbox的样式设置

checkbox-inline: 让checkbox在一行中显示。

btn-block:让按钮的宽度变成100%，并且成为块级元素

disabled:禁用状态

响应式图片

img-responsive:在img标签里面加入，就可以把它定义为响应式，让他可以随着屏幕尺寸的变化而变化。但放大的尺寸不会超过图片本身。

img-rounded:图片变圆角

img-circle:图片变成一个圆形

img-thumbnail:添加一个圆角边框，边框有一定空隙

辅助类样式

close:关闭按钮的图标

clearfix:清除浮动

row函数自带清除浮动

center-block:针对块元素，让它自动居中。

show：显示

hidden:隐藏，同时位置没了

invisible：隐藏，但位置还在。

响应式工具

针对不同的宽度，显示或者隐藏相关的内容

visible-lg-block :显示，（当屏幕尺寸大于1200，显示）

hidden-lg: 隐藏

打印样式

visible-print-block:只有打印时显示样式，第3个元素还可以改为inline，inline-block。

hidden-print:只有打印时隐藏样式

第二部分–组件

字体图标

直接官网引入就可以了

按钮组

btn-group:相比单个按钮的组合，按钮组里面的按钮更加紧密，没有样式隔开。

同时它后面还可以加 ‘’ -md ‘’ 之类的东西来定义按钮组的尺寸。

btn-group-vertical: 按钮组竖着排

btn-group-justified:按钮两端对齐，100%撑开这个父级，而且按钮组的每个按钮的父级要要btn-group。

caret：一个倒着的三角形图标，在它的父级添加dropup,可以使这个三角形朝上。

下拉菜单

使用时注意：

1.要给父级一个class：dropdowon,或者给父级添加定位属性

2.给下拉菜单的button添加一个data-toggle="dropdown"的属性，并且加一个dropdown-toggle的class

3.ul要添加一个dropdown-menu的class

下拉菜单的样式：

1.open:默认菜单是展开的，给dropdown添的

2.pull-right:元素靠右浮动

3.dropup：让菜单在上方显示

4.dropdown-header:让菜单里面出现标题，给li添加

5.divider:分割线，给li添加，让菜单有一条分割线

6.text-center:让内容居中