bootstrap的使用.

1.bootstrap的栅格系统:

吸取了table和div+css各自的优点 , 进行页面的布局.
是一个响应式页面:
设置多套页面的样式(使用同一份代码) , 根据屏幕分辨率自动切换样式.

2.bootstrap的使用:

1-下载bootstrap的框架压缩包 , Bootstrap中文网 http://www.bootcss.com/

2.基本模板.

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  	<!--  设置页面的字符集,使用utf-8(包含中文)	-->
    <meta charset="utf-8">
    <!--
    	content="IE=edge"
    	如果浏览器使用IE,那么优先使用edge内核解析
    -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
    	name="viewport" 可视化窗口
    	content="width=device-width 设置屏幕的宽度(分辨率)
    			 initial-scale=1" 屏幕的缩放比例为1 不支持缩放
    			 user--scalable=yes 允许用户缩放
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- 
    	引入bootstrap封装好的css
    -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!--
    	bootstrap基于jquery开发的,引入jquery框架
    -->
    <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- 
    	引入bootstrap封装好的js
    -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

3.栅格系统布局:
bootstrap的使用.

a.每一个栅格系统分为12块.
b.栅格系统通过属性去进行响应式.
  col-md-*      中等屏幕
  col-sm-*      小型屏幕
  col-xs-*       超小型屏幕
c.div是否显示隐藏