Bootstrap学习笔记

目录

Bootstrap响应式布局

1.Flax弹性布局

1）容器属性

2）项目属性

2.响应式布局

1.Bootstrap样式

2.Css全局样式

---

Bootstrap响应式布局

1.Flax弹性布局

CSS3弹性盒( Flexible Box或 flexbox)是一种布局方式，常用于当页面需要适应不同的屏幕大人以及设备类型时能够确保元素拥有恰当的行为。

优点：

能够更加高效方便地控制元素的对齐、排列。

无论元素的尺寸是固定的还是动态的，都可以自动计算布局内元素的尺寸。

控制元素在页面中的布局方向。

按照不同于 DOM 所指定的排序方式对屏幕上的元素重新排序。

可以让子元素排列在一行

使元素的高度一致

Flex 弹性盒模型基本语法如下:

display:flex;

注意 (1)在 webkit 内核的浏览器中使用时，须加上-webkit-前缀，即 display :-webkit- flex;。 (2)将父元素设为 Flex 弹性盒布局以后，子元素的 float、clear和 vertical-align 属性将失效。

1）容器属性

容器属性	说明
flex-direction	决定主轴的方向(即项目的排列方向)
flex-wrap	定义项目在一条轴线排不下时如何换行
flex-flow	复合属性:是 flex-direction 和 flex-wrap 属性的简写形式
justify-content	定义项目在主轴上的对齐方式
align-items	定义项目在纵轴上的对齐方式
align-content	定义多根轴线的对齐方式

① flex-direction

flex-direction 属性用于决定主轴的方向，即子元素在父容器中的位置。其属性值有如下四个。

• row:横向从左到右排列(左对齐)，为默认的排列方式。

• row-reverse:反转横向排列(右对齐)，从后往前排，最后一项排在最前面。

• column:纵向排列。

• column-reverse:反转纵向排列，从后往前排，最后一项排在最上面。

②flex-wrap

默认情况下，容器中的项目都排在一条轴线上，而 fex-wrap 属性用于定义项目在一条轴线排不下时应该如何换行。其属性值有如下三个。

• nowrap:默认值。规定项目不拆行或不拆列。

• wrap:规定灵活的项目在必要的时候拆行或拆列。

• wrap-reverse:规定灵活的项目在必要的时候拆行或推诉列，但是以相反的顺序。

③flex-flow

flex-flow 是一个复合属性(flex-direction 和 flex-wrap的简写形式)，默认值为row和nowrap.其基本语法如下。

flex-flow:flex-direction || flex-wrap;

在上述语法中，flex-direction 可取row、row-reverse、column 和 column-reverse 四个值:flex-wrap可取 nowrap、wrap、wrap-reverse 三个值。使用方式与前面相同。

④justify-content

justify-content 属性设置弹性盒子元素在主轴(横轴)方向上的对齐方式。其常用属性值有如下五个。

• flex-start:默认值。项目位于容器的开头。

• flex-end:项目位于容器的结尾。

• center:项目位于容器的中心。

• space-between:项目位于各行之间留有空白的容器内。

• space-around:项目位于各行之前、之间、之后都留有空白的容器内。

⑤align-items

align-items 属性设置弹性盒子元素在侧轴(纵轴)方向上的对对齐方式。其常用属性值有如下五个。

• stretch:默认值，如果项目未设置高度或auto，子元素会会被拉伸以适应容器。

• flex-start:元素位于容器的开头。

• flex-end:元素位于容器的结尾。

• center:元素位于容器的中心。

• baseline:元素位于容器的基线上。

⑥align-content

align-content 属性用于设置多根轴线的对齐方式，其常用属性值有如下六个。

• stretch:默认值，元素被拉伸以适应容器。

• flex-start:元素位于容器的开头。

• flex-end:元素位于容器的结尾。

• center:元素位于容器的中心。

• space-between:元素位于各行之间留有空白的容器内。

• space-around:元素位于各行之前、之间、之后都留有空白的容器内。

2）项目属性

项目属性	说明
order	设置项目的排列顺序
flex-grow	设置项目的放大比例
flex-shrink	设置项目的缩小比例
flex-basis	设置弹性盒伸缩基准值
flex	复合属性，代表 flex-grow、flex-shrink 和 flex-basis 的简写 用于设置弹性盒模型对象的子元素如何分配空间
align-self	设置子元素在侧轴(纵轴)方向上的对齐方式

①order

order 属性用于设置项目的排列顺序，数值越小，排列越靠前。其属性值可以是正数，也可以是负数，默认值为0。如果项目是垂直方向排列，order属性的数值越小， 排列越靠上方。

②flex-grow

flex-grow 属性用于设置项目的放大比例，主要用于分配配项目的剩余空间，其属性值不能为负数，默认为 0。

③flex-shrink

flex-shrink 属性用于设置项目的缩小比例，即如果空间不足，项目将会缩小。其属性值不能为负数默认为 1。

④flex-basis

flex-basis 属性用于设置弹性盒伸缩基准值，其默认值为 auto，即项目的本来大小。除此之外，属性值还可以为 px、%、rem 等。

⑤flex

flex 属性用于设置弹性盒模型对象的子元素如何分配空间，其是一个复合属性，代表 flex-grow. flex-shrink 和 flex-basis 的简写，后两个属性可选，默认值为01auto。除此之外，属性值还可以设置为 auto 和 none，具体解释如下所示。

auto: 与1 1auto 相同:

• flex-grow:1，表示如果容器有剩余空间，它会放大;

• flex-shrink:1，表示如果容器空间不足，它会进行收缩;

• flex-basis:auto，表示元素的内容或者宽度(高度)保持一致。

none:与 00 auto 相同。

• flex-grow:0，表示如果容器有剩余空间，它不会放大;

• flex-shrink:0，表示如果容器空间不足，它不会进行收缩;

• flex-basis:auto，表示元素的内容或者宽度(高度)保持一致。

在实际开发中，建议优先使用 flex 属性，这样写有利于浏览器渲染。

⑥align-self

align-self属性用于设置子元素在侧轴(纵轴)方向上的对齐方式，其常用属性值有如下六个。

• auto:默认值，元素继承它父容器的 align-items 属性。

• stretch:元素被拉伸以适应容器。

• flex-start:元素位于容器的开头。

• flex-end:元素位于容器的结尾。

• center:元素位于容器的中心。

• baseline:元素位于容器的基线上。

align-items:容器属性，用于对项目的为对齐方式进行控制。

align-self:项目属性，用于对自己本身的对齐方式进行控制。

小结 通过 Flex 弹性盒布局，我们学习了六个容器属性和六个项目属性，下面总结重点属性及使用注意点。

重点属性:flex-direction、justify-content、align-item s 及 flex。其中利用 justify-content和 align-items两个属性可以快速简单地解决传统布局中垂直居中对齐的难题。

使用注意点:将容器转为 flex布局后，项目不受 float 的影响。

2.响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。

优点:

面对不同分辨率设备灵活性强，能够快捷地解决多设备显示适应问题。

更少维护，开发一个网站，多终端使用。

缺点:

兼容各种设备，工作量大，效率低下。

代码累赘，会出现隐藏无用的元素，加载时间较长。

媒体查询

媒体查询可以针对不同的屏幕尺寸设置不同的样式，使页面在不同终端设备下达到不同的渲染效果。在使用时，媒体查询有两种常用的引入方式，分别是@media 方式和 link 方式，二者基本语法如下。

@media 方式:

可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询。

@ media(media Type)(and|notlonly) (media Query) {
    css-Code;
}

link 方式:

<link rel="stylesheet" media="mediaType and|notlonly
(media Query)" href="mystylesheet.css">

在上述语法中，不管是@media 方式，还是 link 方式，均包含了 media Type、and/not/only 及 media Query。其中 media Type 表示媒体类型，and|not/only 是关键词，media Query 表示媒体特性。

①媒体类型

在CSS 中，常用的媒体类型是all(全部)、screen(屏幕)及print(页面打印或打印预览模式)。际上，媒体类型值不止这三种

值	描述
all	用于所有设备
aural	己废弃。用于语音和声音合成器
braille	己废弃。应用于盲文触摸式反馈设备
embossed	己废弃。用于打印的盲人印刷设备
handheld	已废弃。用于掌上设备或更小的装置，如 PDA和小型电话
print	用于打印机和打印预览
projection	已废弃。用于投影设备
screen	用于计算机屏幕、平板电脑，智能手机等
speech	应用于屏幕阅读器等发声设备
tty	已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。用于电视和网络电视

②媒体特性

值	描述
width	定义输出设备中的页面可见区域宽度
height	定义输出设备中的页面可见区域高度
min-width	定义输出设备中的页面最小可见区域宽度
min-height	定义输出设备中的页面最小可见区域高度
max-width	定义输出设备中的页面最大可见区域宽度
max-height	定义输出设备中的页面最大可见区域高度
device-width	定义输出设备的屏幕可见宽度
device-height	定义输出设备的屏幕可见高度
orientation	有两个属性值，当取值为 portrait 时表示设备中的页面可见区域高度大于或等于宽度; 除 portrait 值情况外，都取值为landscape
resolution	定义设备的分辨率
color	定义输出设备每一组彩色原件的个数
color-index	定义在输出设备的彩色查询表中的条目数

媒体特性的书写方式和样式的书写方式很相似

③关键词

当媒体特性出现多条并存时，需要通过关键词连接。

and关键词，表示同时满足两个条件生效时，到达限定范围，如：

@media screen and (max-width:1200px) {样式代码...}

上述代码表示样式将使用在计算机显示器和屏幕小于1200px的所有设备中。

only关键词，指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。例如，IE8 能成功解读媒体类型，但是却无法解读 and 后面的媒体特性语句，因此就会连带媒体类型一起 忽略。为了解决这一问题，可以使用 only 关键词进行选择，如

@media only screen and (max-width: 1200px) {样式代码…}

not 关键词，用于排除某种指定的媒体类型，即排除符合表达式的设备，如

@media not print and (max-width: 1200px) {样式代码…}

上述代码表示样式代码将被使用在除打印设备和屏幕宽度小于 1200px 的所有设备中。

1.Bootstrap样式

Bootstrap 是美国 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作，基于 HTML、CSS JavaScript 开发的简洁、直观、强悍的前端开发框架，它会使 Web 开发更加快捷。

Bootstrap 框架的优点主要体现在如下几点：

• 开发方便快捷

• 兼容处理

• 移动设备优先

• 使用广泛

BootStrsp 框架的下载及使用

1.登录 Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

2.单击 下载Bootstrap 按钮

3.下载Bootstrap 框架的文件和源码

BootStrap 12 栅格系统： 行(row) 和 列(column)

Bootstrap 12 栅格系统的使用 共有四种方式 ：列组合 列偏移 列嵌套 列排序

列组合	列偏移	列嵌套	列排序
.col-md-*	.col-md-offset-*	.col-md-*	.col-md-push-和.col-md-pull-

响应式栅格 ：它可以为不同屏幕尺寸提供不同的栅格样式 (除了中等屏幕(md) 还包括 超小屏幕(xs) 小型屏幕(sm) 大屏幕(lg) )

Bootstrap 12 栅格系统参数

Bootstrap栅格参数	超小屏幕手机(<768px)	小屏幕平板电脑(>=768px)	中等屏幕桌面显示器(>=992px)	大等屏幕大桌面显示器(>=1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的当大于这些值将变为水平排列C	~	~
.container 最大宽度	None(自动)	750px	970px	1170px
类前缀	.col-xs	.col-sm-	.col-md-	.col-lg-
列(column) 数	12	12	12	12
最大(column)宽	自动	~62px	~81px	~97px
槽(gutter) 宽	30px(每列左右均有15px)	~	~	~
可嵌套	是	~	~	~
偏移(offsets)	是	~	~	~
列排序	是	~	~	~

2.Css全局样式

Css全局样式是Bootstrap框架的基础 包括排版 表单 按钮

排版 ：如标题(H1~H6) 列表 文本 图片

1. 标题： .h1~到 .h6

2. 页面主体：.lead :让一段文字突出显示

3. 对齐方式：在class中设置 text-left ，text-center

4. 列表：无序列表、有序列表、定义列表

列表	元素	作用
内联列表	.list-inline	将所有元素放置于同一行
水平定义列表	.dl-horizontal	让<dl>内的短语及其描述排在一行

5.表单：

<form class="from-inline或 form-horizontal"> //内联表单 或 form-horizontal水平排列的
   <div class="from-group">//设置外下边距
     <input class="form-control"/> //让属性宽度变为100% placeholder里的内容变灰
   </div>
</form>

校验状态：has-warning（输入警告） has-error (输入错误)has-success(输入成功)

控件尺寸：

1. 在 class中添加=“ input-lg”： 大控件

2. 在 class中添加=“ input-sm”：小控件

按钮颜色：btn-default(灰色) btn-primary(深蓝色) btn-succcess(成功-绿色)

btn-info(一般信息-天蓝色) btn-warning(警告-黄色) btn-danger(危险-红色) btn-link(链接)

响应式图片

在class中设置“img-responsive”

图片形状 ：img-rounded ：正方形 img-circle：圆形 img-thumbnail：边框正方形