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

    梦想可触
  • 相关阅读:
    Redis系列二 Redis数据库介绍
    Redis系列一 Redis安装
    SpringData系列四 @Query注解及@Modifying注解
    SpringData系列三 Repository Bean 方法定义规范
    SpringData系列二 Repository接口
    SpringData系列一 Spring Data的环境搭建
    ThinkPHP3.1.3 Fast & Simple OOP PHP Framework 显示错误
    STL学习系列之一——标准模板库STL介绍
    STL之二:vector容器用法详解
    STL使用总结
  • 原文地址:https://www.cnblogs.com/dreamerC/p/6203606.html
Copyright © 2011-2022 走看看