Bootstrap响应式布局与组件-优快云博客

一、栅格系统
栅格系统是Bootstrap响应式布局的框架，栅格系统通过一系列的行（row）和列的组合来
创建页面布局：

使用栅格系统规则：
①、行（.row）必须包含在容器（container或者container-fluid）里；
②、在行内创建一组水平排开的列（.col）；
③、每一行被分为12个格，通过类似.col-sm-4的类来控制每一列占位多少格（这里是4格）；
④、每一行的列所占格数超过12，便会换行；
⑤、可以对不同大小的屏幕定义不同的布局。

屏幕适配：列宽
Bootstrap的栅格系统允许您根据屏幕大小调整列的宽度。上述col-sm-8中的sm用来匹配>=768px的屏幕，这样的尺寸匹配共有4种：
①、lg用来匹配大屏幕（大桌面显示器）：>=1200px的屏幕；
②、md用来匹配中等屏幕（桌面显示器）：>=992px的屏幕；
③、sm用来匹配小屏幕（平板）：>=768px的屏幕；
④、xs用来匹配超小屏幕（手机）：< 768px的屏幕；
lg、md、sm、xs的意思是当浏览器宽度大于等于列才起作用，小于的时候回重叠。

上述的4种规则可以同时存在。当同时被满足时，规则的序号越小，优先级越高。

tips:
栅格系统是根据浏览器宽度来判断屏幕大小的，你只需要量浏览器宽度拖动下，便会
产生上述效果。

提高：
你可以在每列上添加更多的col-xx-x规则，来匹配其他大小的屏幕。

二、Bootstrap导航栏
boostrap提供了一套基础CSS样式，与此同时还提供了一组前端组件。比如导航栏、轮播、
表单组件等等。
本文将关注于如何创建一个完整的、现代化的、响应式的导航栏。导航栏是一个非常常用的组件，
下图中最上面黑色的一栏就是Bootstrap提供的默认导航栏样式。

提高
为什么在点击按钮页面会产生变化呢？
这是Bootstrap的脚本在控制：当鼠标点击某个HTML控件时，浏览器会通知脚本（js），
页面脚本操作页面内容，使页面发生改变。

导航栏样式：
①、.navbar用来表示该元素的语义：它是一个导航栏，bootstrap将会以导航栏的方式设置其子元素的样式。
②、.navbar-default用来表示该元素的样式：使用default（默认）样式，即灰色的背景，黑色的文字。

如果使用上面的样式，默认如果body内容高度过高，页面会出现滚动条，如果想固定导航栏不随页面滚动。
在内navbar-fixed-top。

提高：
在bootstrap中，多数组件都是以xxx来设置组件语义，以xxx-default、xxx-inverse、xxx-success等来设置
组件样式。例如

给

标签添加.navbar-from是为了让表单能够与导航栏其他组件水平对齐。

因此bootstrap3是基于响应式设计的一套框架，又以栅格系统为，辅以基础的布局组件，加上多个
封装完好的css组件和js插件，形成快速开发的一整套框架。

从下图可以看到，这就像是一个金字塔，每层都基于下面的基础上。
JS组件
CSS组件
基础布局组件
栅格系统

label标签和特定表单元素关联方式
label标签的关联方式主要有两种，显示关联和隐式关联：
方式1：显示关联
显式关联是通过label标签的for属性，显示与另一个表单控件关联。需要注意的是，for属性的值
必须是与label标签在同一文档中的可标记表单元素的id，注意的是id而不是name。
方式2：隐式关联
隐式关联是直接将表单控件label标签内，这种情况下，label标签只能包含一个表单元素，
包含多个只对第一个有效。

显示关联和隐式关联的优缺点：
显式关联优点：
①、可以减少标签嵌套层数
②、label标签和表单可以在不同的位置
显示关联缺点：
①、控件需要定义id。
②、label标签和表单控件不利于作为一个整体来控制。

隐式关联优点：
    ①、控件无需要定义id。
    ②、标签和控件方便作为一个整体控制。
隐式关联缺点：
    ①、增加了标签嵌套层数
    ②、不能将标签和关联控件放到不同的位置。

label标签的浏览器支持以及可关联的表单元素

所有主流浏览器都支持label便签。Safari 2或者更早的版本不支持label标签。
能使用显示关联的表单元素有：
①、input type="text" 文本框，点击标签时关联的文本框或得焦点。
②、input type="checkbox" 复选框，点击标签时选中或者取消选中复选框。
③、input type="radio" 单选框，点击标签时选中单选框。
④、input type="file" 文件上传，点击标签时打开文件选择对话框。
⑤、input type="password" 密码框，点击标签时密码获得焦点。
⑥、textarea 文本域，点击标签时文本域获得焦点。
、select 下拉框，点击标签时，下拉框或得焦点，不过并不展开下拉框选项。

label标签的form属性

::before和::after伪元素的用法

一、介绍
CSS3为了区分伪类和伪元素，伪元素采用

转载于:https://www.cnblogs.com/2018-05-9-ygk/p/11152793.html