java：BootStrap(Web前端CSS框架)学习

一.BootStrap:html,css与js的框架

功能：响应式(兼容各种设置)，移动设备优先。内置了很多漂亮的样式

二.BootStrap入门

2.1 使用BootStrap需要引入三个文件
min:压缩版/没有min:开发版(源码)
bootstrap.min.css/bootstrap.css -> bootstrap的所有样式
jquery.min.js/jquery.js -> bootstrap写js代码就在用这个框架
bootstrap.min.js/bootstrap.js -> bootstrap自己的js代码

<!--引入bootstrap的样式文件-->
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
	<!--引入jQuery（js框架）的支持-->
	<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<!--引入bootstrap的js-->
	<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

2.2 html中的几个特性

-> html5的写法

 <meta charset="utf-8"> -> 字符编码
 <meta name="viewport" content="width=device-width, initial-scale=1"> -> 视口(响应式必需要加)

三.布局组件

 <div class="container">两边会留一些位置</div>
 <div class="container-fluid">占满整行100%</div>

四.删格系统
意思:把一行分成12份,我们可以进行相应的排列
.col-xs-(1-12的数字) 超小屏幕 手机 (<768px)
.col-sm-(1-12的数字) 小屏幕 平板 (≥768px)
.col-md-(1-12的数字) 中等屏幕 桌面显示器 (≥992px)
.col-lg-(1-12的数字) 大屏幕 大桌面显示器 (≥1200px)
偏移:col-md-offset-2
在相应的设备隐藏:hidden-xs/hidden-sm …

详情请看BootStrap中文网：http://www.bootcss.com/