Bootstrap学习应用

标签：

　　1、栅格式布局：

　　　　　　　     栅格只有12格

　　　　　　　　  主要用于没有设计经验，自行设计网页。

　　　　起步：     导入一个CSS文件 和两个JS文件 

　　　　　　　　  BOOTATRAP.MIN.CSS  ---   /*IE(html5shiv.min.js  --  repond.min.js)*/ --  ( jquery-1.11.2-mian.js   bootstrap.min.js)

　　　　　　　　  写一个在IE兼容的<meta http-equiv="X-UA-Compatible" content="IE=edge">

　　　　　　　　  写移动端的代码，响应式用的<meta name="viewport" content="width=device-width, initial-scale=1">

　　　　　　　　  首先禁用响应式布局：

　　　　　　　　  <style type="text/css">

　　　　　　　　  　　.container{//禁用响应式

　　　　　　　　　　　　　　width:1200px !important;

　　　　　　　　　　　}

　　　　　　　　  　　/*注释：row可以进行嵌套，可以在row中继续套个row 但是却不能嵌套.container*/

　　　　　　　　　　 .c1{

　　　　　　　　　　　　　//它的宽度 根据包裹层的宽度自动适应　　

　　　　　　　　　　  }

　　　　　　　　  </style>

　　　　　　　　  <div class="container">

　　　　　　　　  　　<div class="row">/*行，且必须写在container里面*/

　　　　　　　　　　  　　<div class="col-xs-4 c1">/*xs sm md lg  lg的宽度会在1200以上 md 的宽度会在 900多-1200之内 sm是小屏幕主要是为平板设计700-900之间  xs超小屏幕 小于700像素 为APP端,col-xs 提供不同的列*/

　　　　　　　　　　　　  </div>

　　　　　　　　　　　　  <div class="col-xs-1 col-xs-pull-1 c2">/*这里的xs-1中的1为所占格数  在其中写内容，块级元素内还是有间距 padding  col-xs-pull-1向左拉一格  PUSH 和PULL 不会影响其它的元素 而COL-XS-OFFSET-2 推 会影响相邻元素的位置*/

　　　　　　　　　　　　  </div> 　　

　　　　　　　　　　　　  <div class="col-xs-1 col-xs-push-4 c3"></div>/*如果超出了12格，那么就会换行，但是这样做是不对的，如果在需要换行 那么只需要在加一个DIV里面嵌入一个ROW  col-xs-push-4这个是将这个块级元素向右推4格*/

　　　　　　　　　　  </div>

　　　　　　　　  </div>

Bootstrap学习应用

标签：

原文地址：http://www.cnblogs.com/WEB-ming/p/4819069.html