bootstrap 学习笔记（一）

在此就不做 bootstrap 的介绍了，近几年 bootstrap 越来越流行，一点不亚于 js 中的 jquery。

以下为 bootstrap 3.3.5 学习中记录的东西，方便查阅，作者使用的是 jsp ，跟 html 可能有稍许不同，请自行参考修改

【引用文件】

【页面引用】

路径请自行规划

【标准模板】

	
		
		
		
		
		
		
		
		
		

		
		
		
		

		
		
	
	
	
		hello bootstrap!
	

【css选择器优先级】

依次为

style 属性
id
class
元素标签

【媒体查询与 container 源码】

该样式利用媒体查询，根据页面宽度不同，展示不同

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

【12栅格系统】

.row: 一行

.col-md-*: * 为列号

.col-md-offset-*: 列向右移几列的宽度

.col-md-push-*: 向右推（移动）几列

.col-md-pull-*: 向左拉（移动）几列

.clearfix visible-xs: 清除浮动，只在小型屏幕生效

【基础组件5种颜色】

primary(重点蓝)
success(成功绿)
info(信息蓝)
warning(警告橙)
danger(危险红)

【按钮】

btn-primary
btn-success

按钮大小分为以下几个尺寸

xs: 超小
sm: 小型
缺省: 普通
lg: 大型

btn-primary
btn-success
btn-success
btn-success

【进度条】

进度条需js进行进度变动

	

		45% Complete
	

【下拉框】

	
		我的书籍
		
	
	

		

			JavaScript 编程精解
		
		

			JavaScript 设计模式
		
		

			JavaScript 启示录
		
		

		

			深入理解 bootstrap3
		
	

【选项卡】

	

		首页
	
	

		个人资料
	
	
	

		
		
			我的书籍
			
		
		

			

				javaScript 编程精解
			
			

				javaScript 设计模式
			
			
			

				javaScript 启示录
			
			

				深入理解 bootstrap
			
		
	


	

		
点击 “首页”显示
	
	

		
点击 “个人资料”显示
	
	

		
点击 “javaScript 编程精解” 显示
	
	
	

		
点击 “javaScript 设计模式” 显示
	
	

		
点击 “javaScript 启示录” 显示
	
	

		
点击 “深入理解 bootstrap3” 显示
	

data-toggle="tab" href="#home"
可以使用
data-toggle="tab" data-target="#home" 
替代，效果相同，js 默认先检测 data-target 属性，如果没有，再检测 href 属性，如果还没有，则默认为父元素

【表格】

	

		
1
		
2
		
3
		
4
	
	

		
1
		
2
		
3
		
4
	
	

		
1
		
2
		
3
		
4
	

table-striped : 斑马线
table-bordered : 边框
table-hover : 悬浮
table-condensed : 表格紧凑

注意， 斑马线与 鼠标悬浮样式，颜色与 白色很接近，所以可能会误认为 table-striped 与 table-hover 没有生效，不起作用，

如果需要明显显示，我们需要重写样式颜色

/** 斑马线 **/
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
	background-color: #EFEFEF;
}
/** 悬浮 **/
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
	background-color: #DFE8F6;
}

【元素的隐藏与显示】

	超小屏幕 手机(<768px)	小屏幕 平板(≥768px)	中等屏幕 桌面(≥992px)	大屏幕 桌面(≥1200px)
.visible-xs	可见	隐藏	隐藏	隐藏
.visible-sm	隐藏	可见	隐藏	隐藏
.visible-md	隐藏	隐藏	可见	隐藏
.visible-lg	隐藏	隐藏	隐藏	可见
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

【响应式导航条】

	

		
		Brand
		
		
			Toggle navigation
			
			
			
		
		
	
	
	

		

			

				主页
			
			

				作品
			
			

				
					下拉菜单
					
				
				

					

						子菜单1
					
					

						子菜单2
					
				
			
			

				图书