甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
一、栅格系统
1、容器：包含两种容器，
10年积累的网站建设、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有梨林免费网站建设让你可以放心的选择与我们合作。
2、数据行(.row)必须包含在容器中，在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数12，具体内容应当放置在列容器（.column）之内，而且只有列（.column）才可以作为行容器(.row)的直接子元素
col-lg-、col-md-、col-sm-、col-xs-
col
col
col
col
每个类名，都代表在该屏幕大小下才起作用
col
col
//只有在大屏幕下，才会排成一行，其他屏幕下，就当做col-lg-6这个类名没有生效，因为是div，独占一行，所以肯定就排2行了满足条件的时候，每个div永远都是水平排列的，如果不满足条件了，就代表类名没有生效，因为是div，独占一行，所以肯定就依次往下排了
理解：每个div，上面的数值是几，就代表其占据了多少的空间，比如
.item1的div，
col-lg-3：在大屏幕，占据3块，即屏幕的四分之一
col-md-6：在中等屏幕，占据6块，即屏幕的二分之一
col-sm-12，col-xs-12：在小或超小屏幕，占据12块，即占据一整个屏幕，在这种屏幕下，其他的都得往下面排
3、
列偏移：只能往右偏
col-*-offset-n：div向左偏移n个网格单位，（1<= n <=12）
列排序：push往右偏，pull往左偏
col-lg-2
col-lg-10加上push、pull，效果相当于二者换了个位置
4、row可以嵌套，子级就以父级宽度为总宽度，然后再以12个网格平均分配
5、遇到网格高度不一样，排列不均匀，可以在需要的地方清除浮动：
二、响应式工具
在不同的设备上，页面要展示的内容也不一样，电脑上展示的就多，手机上展示的就少，适当取舍；
比如右侧的导航菜单，大屏幕显示，小屏幕隐藏
概念：针对于不同设备展示或隐藏页面的内容
可见类：visible-a-b
a：lg md sm xs
b：block inline inline-block
举例：
隐藏类：hidden-a
a：lg md sm xs
举例：
三、Glyphicons字体图标
好处：减少请求、容易控制样式
用法：font-face、字体路径
四、预定义样式风格，
包括按钮btn-、弹框alert-、面板panel-、背景相关bg-、文字颜色text-
Title! Alert body ...
Panel title
Panel content
一行段落
文字颜色以上的样式分格，可以应用到所有的标签上，比如a标签
四、大小
-[ lg、sm、xs ]：包括按钮、输入框等都可以应用此类来控制大小，这种大小和屏幕尺寸有关系；大的屏幕用大的按钮，小的屏幕用小的按钮
btn-lg、btn-sm、btn-xs
input-lg、input-sm、input-xs
五、按钮
基类：btn
样式：btn-default（默认） btn-link（链接）
大小：btn-[ lg、sm、xs ]
状态：active、disabled
种类：a input button，这三种可以用于按钮制作【推荐使用button来写按钮】
//input按钮文字写在value里，button和a写在标签里
按钮
块级：btn-block，按钮默认是行内元素，加上这个就变成块级元素，适合在移动端使用
按钮组：
按钮
input不行
箭头向上：
// 添加类名dropup
六、下拉菜单
属性：
data-toggle="dropdown"（js交互操作）不单单是下拉菜单，别的组件也是如此，比如选项卡：data-toggle="tab"
aria-（针对特殊人群）
role（针对特殊人群）
open
dropdown-menu-right：加在dropdown-menu上，可以使得下拉菜单靠右
dropdown-header
divider
实现下拉菜单：三个class+data-toggle="dropdown"
三个class：父级dropdown，触发按钮dropdown-toggle，下拉菜单内容dropdown-menu
触发按钮上加上data-toggle="dropdown"
默认下拉框
$("#drop2").on("shown.bs.dropdown",function(){
alert(1)
});
不仅仅是button可以做下拉菜单，a标签也可以，只要加上了data-toggle="dropdown"
下拉菜单的展开隐藏，可以通过标签上写：data-toggle="dropdown"控制，也可以通过写js控制
比如：
$(".dropdown-toggle").dropdown(); //也可以控制下拉菜单的显示，但是不能隐藏，这是区别，注意！！
其他的，比如选项卡，用js控制的话都是类型的原理：方法名和自定义属性名一样
标签：data-toggle="tab"
js：$(".nav-tabs").tabs();
【注意点】用js控制多个下拉菜单，彼此之前不互相影响，然后再借用js，就可以做到显示隐藏，且多个下拉框之间互不影响；
但是用标签来写，彼此之间会有影响，且点击一个下拉框，会默认把其他的下拉框都隐藏，只显示当前点击的那个
data-target=".dropdown" ：指定哪些元素参与控制
$(".dropdown").on("show.bs.dropdown",function(){
alert(1)
});
$(".dropdown").on("shown.bs.dropdown",function(){
alert(1)
});
$(".dropdown").on("hide.bs.dropdown",function(){
alert(1)
});
$(".dropdown").on("hiden.bs.dropdown",function(){
alert(1)
});七、选项卡
头部：
带下拉菜单的切换
八、导航条
基类：navbar
navbar-default
nav navbar-nav
navbar-inverse
navbar-static-top：去掉两边圆角
navbar-fixed-top：固定在头部
navbar-fixed-bottom：固定在底部
遮挡内容的问题：给body加上margin-top即可
navbar-header
navbar-brand：网站logo，可以是文字或者图片
navbar-left：导航菜单靠左
navbar-right：导航菜单靠右
navbar-btn：按钮在导航条里面上下居中
navbar-link：链接在导航条里面上下居中
navbar-text：文字在导航条里面上下居中
navbar-form
带下拉菜单的导航条
响应式导航条：
navbar-toggle
collapse
navbar-collapse
滚动监听
data-spy
data-target
data-offset：监测走到距离顶部多少距离还是发生改变
举例：监听body，页面走到哪里，导航条随之改变对应的导航
body{ position:relative; }
.section{padding-top:50px;}
九、各个组件
1、bs3-thumbnail:content
缩略图：
2、bs3-alert-success
警告框：可以用于在填写表单时的提示信息，填写是否符合要求
3、bs3-media
媒体对象
左右对齐结构，左边图片右边文字或者左边文字右边图片，可以用于构建新闻，不仅仅是图片，可以是视频等等，文字也可以带有标题，类似于新闻标题
4、bs3-list-group
列表组
和表格不一样，只有表格的一列，用于显示一列数据
5、徽章
6、bs3-panel-success
面版
可以带有头部、内容区、底部
十、零碎知识点
1、
左浮动：pull-left；
右浮动：pull-right；
固定定位：affix；
居中：
2、在容器里面，
bar所在的div不能和右边重合，会有padding值，解决办法：
放进row里面或者拿出container，即：
//放进row里面
//拿出container外面完整的选项卡代码
home的内容
tab的内容
$("#myTabs a").mouseover(function(){
$(this).tab("show");
});