zoukankan      html  css  js  c++  java
  • Bootstrap之栅格系统

    bootstrap

    移动优先  中文官网  http://www.bootcss.com/

    1.基本模板

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<!-- 兼容IE -->
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<!-- 兼容移动端 -->
          <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>Document</title>
    	<link rel="stylesheet" href="./css/bootstrap.css" style type="text/css">
         <script src="./js/jquery-1.11.3.js"></script> <script src="./js/bootstrap.js"></script> </head> <body> </body> </html>

    2.容器(默认样式中左右各15px的padding)

      流体容器 铺满整个屏幕  例:<div class="container-fluid"</div>  

      固定容器 自适应居中  分辨率大于1200时容器大小为1170px 根据不同分辨率 值会发生改变 例:<div class="container"></div>

        注: 一般头尾部采用流体 主体采用固定

    3.栅格系统

      row表示行 ( 会自动处理默认padding )  col表示列

      组合模式  col-lg-  col-md-  col-sm-  col-xs-

      列偏移  col-offset-  ( 只能向右偏移 值的范围:最小为1最大为12 偏移量+自身列数>12时会向右顶出现横向滚动条)

      列排序 col-lg-push(pull)-  ( push为向后排序 pull为向前排序 )

      左浮动 pull-left  右浮动 pull-right

      清除浮动 <div class="clearfix"></div>

      固定定位 affix

      打印类:  

          在打印中可见 非打印中不可见 visible-print-block
          在打印中不可见 非打印中可见 hidden-print

    梦想可触
  • 相关阅读:
    Windows下的符号链接
    简单谈谈存储器的容量缩水问题
    配置CKEditor和CKFinder
    CKFinder的水印控件的问题
    关于 Visual Studio 默认创建的不是公共类
    Symbian 60 按键以及对应的键值(图)
    PLC中存储器的数据类型与寻址方式
    S7200 寻址
    电工识图笔记
    S7200型号串口通信参数设置
  • 原文地址:https://www.cnblogs.com/dreamerC/p/6203606.html
Copyright © 2011-2022 走看看