• Bootstrap学习笔记(二)


    8、全局CSS样式 —— 栅格布局系统

      页面布局的方式:

        (a) 使用table做布局      

          好处:简单,不易出错
          不足:语义有问题,性能有问题

           (b) 使用DIV+CSS做布局      

          好处:可扩展性好,性能好
          不足:不易控制

        (c) Bootstrap 提供的 "Grid System" 栅格布局系统

          好处:可扩展性好,性能好,容易控制,实现了响应式布局

      Bootstrap栅格布局系统的使用方法

        1) 介绍:grid system 底层使用 div+css 来实现,但概念使用的是 "行(row)" 和 "列(col)" 的概念。

        2) Bootstrap 把客户端屏幕分为四类:

          lg:屏幕宽 >= 1200px 超大PC屏

          md:1200px > 屏幕宽 >= 992px 中等PC屏

          sm:992px > 屏幕宽 >= 768px 平板屏幕

          xs:768px > 屏幕宽 手机屏

        3) 所有行和列必须放在容器中,容器有两个:

          .container

          .container-fluid

        4) 栅格系统的基本结构      

          <div class="container">
            <h1...h6>XXX</h1...h6>
            <div class="row">
              <div class="col">内容</div>
            </div>
          </div>

         注意:.row必须放在容器中,.row 不能直接放置内容,只能放置.col,所有内容放在.col 中

        5) 栅格系统可以嵌套,但.col中可以继续放.row>.col,不能直接放.col

        6) 一个行中平均分为12份

        7) 不同宽度的屏幕中,使用的列不同,分为:

            col-lg

            col-md

            col-sm

            col-xs

        8) 每个列要制定自己的宽度占比,如:

            col-md-1

            col-md-2

            col-md-3

            ...

            col-md-12

        9) 不同的列对指定的屏幕及更大的屏幕都有效,对更小的屏幕无效

          col-lg-* 对lg屏幕有效

          col-md-* 对md/lg屏幕都有效

          col-sm-* 对sm/md/lg屏幕都有效

          col-xs-* 对xs/sm/md/lg屏幕都有效

        10) 一个列可以指定不同屏幕下的不同的宽度占比

        11) 可以知道那个某个列在指定的屏幕宽度下隐藏

          .hidden-xs

          .hidden-sm

          .hidden-md

          .hidden-lg

      实例1:

      1 <!DOCTYPE html>
      2 <html lang="zh-cn">
      3     <head>
      4         <meta charset="utf-8">
      5         <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6         <meta name="viewport" content="width=device-width, initial-scale=1">
      7         <title>全局CSS样式 -- 栅格布局系统</title>
      8         <link href="css/bootstrap.min.css" rel="stylesheet">
      9         <!--[if lt IE 9]>
     10           <script src="js/html5shiv.min.js"></script>
     11           <script src="js/respond.min.js"></script>
     12         <![endif]-->
     13         <style>
     14             div{
     15                 border: 1px solid #000;
     16             }
     17         </style>
     18     </head>
     19     <body> 
     20         <div class="container"> 
     21             <h1>全局CSS样式 -- 栅格布局系统</h1>
     22             <h2>一行中放置一个列</h2>
     23             <div class="row">
     24                 <div class="col-md-1">MD-1</div>
     25             </div>
     26             <div class="row">
     27                 <div class="col-md-2">MD-2</div>
     28             </div>
     29             <div class="row">
     30                 <div class="col-md-3">MD-3</div>
     31             </div>
     32             <div class="row">
     33                 <div class="col-md-4">MD-4</div>
     34             </div>
     35             <div class="row">
     36                 <div class="col-md-5">MD-5</div>
     37             </div>
     38             <div class="row">
     39                 <div class="col-md-6">MD-6</div>
     40             </div>
     41             <div class="row">
     42                 <div class="col-md-7">MD-7</div>
     43             </div>
     44             <div class="row">
     45                 <div class="col-md-8">MD-8</div>
     46             </div>
     47             <div class="row">
     48                 <div class="col-md-9">MD-9</div>
     49             </div>
     50             <div class="row">
     51                 <div class="col-md-10">MD-10</div>
     52             </div>
     53             <div class="row">
     54                 <div class="col-md-11">MD-11</div>
     55             </div>
     56             <div class="row">
     57                 <div class="col-md-12">MD-12</div>
     58             </div>
     59 
     60             <h2>一行中放置等宽的多列</h2>
     61             <div class="row">
     62                 <div class="col-md-1">MD-1</div>
     63                 <div class="col-md-1">MD-1</div>
     64                 <div class="col-md-1">MD-1</div>
     65                 <div class="col-md-1">MD-1</div>
     66                 <div class="col-md-1">MD-1</div>
     67                 <div class="col-md-1">MD-1</div>
     68                 <div class="col-md-1">MD-1</div>
     69                 <div class="col-md-1">MD-1</div>
     70                 <div class="col-md-1">MD-1</div>
     71                 <div class="col-md-1">MD-1</div>
     72                 <div class="col-md-1">MD-1</div>
     73                 <div class="col-md-1">MD-1</div> 
     74             </div>
     75             <div class="row">
     76                 <div class="col-md-2">MD-2</div>
     77                 <div class="col-md-2">MD-2</div>
     78                 <div class="col-md-2">MD-2</div>
     79                 <div class="col-md-2">MD-2</div>
     80                 <div class="col-md-2">MD-2</div>
     81                 <div class="col-md-2">MD-2</div>
     82             </div>
     83             <div class="row">
     84                 <div class="col-md-3">MD-3</div>
     85                 <div class="col-md-3">MD-3</div>
     86                 <div class="col-md-3">MD-3</div>
     87                 <div class="col-md-3">MD-3</div>
     88             </div>
     89             <div class="row">
     90                 <div class="col-md-4">MD-4</div>
     91                 <div class="col-md-4">MD-4</div>
     92                 <div class="col-md-4">MD-4</div>
     93             </div>
     94             <div class="row">
     95                 <div class="col-md-5">MD-5</div>
     96                 <div class="col-md-5">MD-5</div>
     97                 <div class="col-md-5">MD-5</div>
     98             </div>
     99             <div class="row">
    100                 <div class="col-md-6">MD-6</div>
    101                 <div class="col-md-6">MD-6</div>
    102             </div>
    103             
    104             <h2>一行中放置多个不等宽的列</h2>
    105             <!-- 1:5的两列 -->
    106             <div class="row">
    107                 <div class="col-md-2">1:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    108                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    109                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    110                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    111                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    112                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>            
    113                 <div class="col-md-10">5:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    114                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    115                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    116                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    117                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    118                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quas, magnam perspiciatis nulla eveniet quia qui repudiandae corrupti. Possimus unde nam obcaecati reiciendis aliquam minima? Quos at nobis, distinctio ipsam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    119                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    120                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    121                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    122                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    123                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quas, magnam perspiciatis nulla eveniet quia qui repudiandae corrupti. Possimus unde nam obcaecati reiciendis aliquam minima? Quos at nobis, distinctio ipsam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    124                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    125                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    126                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    127                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    128                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quas, magnam perspiciatis nulla eveniet quia qui repudiandae corrupti. Possimus unde nam obcaecati reiciendis aliquam minima? Quos at nobis, distinctio ipsam.</div>           
    129             </div>
    130 
    131             <div class="row">
    132                 <div class="col-md-3">3:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    133                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    134                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    135                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    136                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    137                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto dicta fuga quasi aliquid non voluptatibus labore adipisci repudiandae, eaque atque odit, aspernatur aut, doloribus. Voluptates ab nesciunt repudiandae, labore quos.</div>
    138                 <div class="col-md-7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates neque dolorem sint minima nisi dolore ducimus officiis illum, accusamus ex architecto minus non maxime ipsum provident quam expedita voluptate accusantium!
    139                 Voluptate, voluptatem eos. Sit dicta dignissimos eveniet ipsum, natus rem ipsa, quibusdam facere, eos, pariatur deleniti. Fugit veniam voluptatibus saepe facilis reprehenderit, neque, provident perspiciatis culpa, repellendus nobis facere. Laboriosam!
    140                 Sapiente recusandae praesentium culpa, aut quia ea dolore magnam itaque quo dicta quaerat, aliquid repudiandae, laudantium reiciendis quae ullam est illo consequatur voluptatibus dolores similique eveniet aliquam expedita ducimus. Alias.
    141                 Sunt cum ea, sequi, aliquid, ut rem a aperiam, nostrum laborum cumque at accusamus eum asperiores! Aspernatur ipsum officiis quaerat molestias a eveniet cupiditate voluptatem, quo, quas, amet magni odit.
    142                 Praesentium eius sed exercitationem, amet. Quidem blanditiis tempora quia, porro, in laboriosam provident odio eaque a nam harum sit magnam aut nostrum nulla necessitatibus id dignissimos delectus! Necessitatibus, eaque, neque.</div>
    143                 <div class="col-md-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem vel corporis autem rerum ullam, aspernatur provident, perspiciatis laborum nobis at assumenda labore officiis enim! Amet, velit. Facere, dolore laboriosam consequatur.</div>
    144             </div>
    145         </div>       
    146     </body>
    147 </html>
    View Code

      实例2: 

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3     <head>
     4         <meta charset="utf-8">
     5         <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6         <meta name="viewport" content="width=device-width, initial-scale=1">
     7         <title>全局CSS样式 -- 栅格布局系统</title>
     8         <link href="css/bootstrap.min.css" rel="stylesheet">
     9         <!--[if lt IE 9]>
    10           <script src="js/html5shiv.min.js"></script>
    11           <script src="js/respond.min.js"></script>
    12         <![endif]-->
    13         <style>
    14             div{
    15                 border: 1px solid #000;
    16             }
    17         </style>
    18     </head>
    19     <body> 
    20         <div class="container"> 
    21             <h1>全局CSS样式 -- 栅格布局系统</h1>
    22             <h2>不同类型的列</h2>
    23             <div class="row">
    24                 <div class="col-xs-2">XS-2</div>
    25             </div>
    26             <div class="row">
    27                 <div class="col-sm-2">SM-2</div>
    28             </div>            
    29             <div class="row">
    30                 <div class="col-md-2">MD-2</div>
    31             </div>
    32             <div class="row">
    33                 <div class="col-lg-2">LG-2</div>
    34             </div>
    35 
    36             <h2>在某种屏幕下隐藏指定的列</h2>
    37             <div class="row">
    38                 <div class="col-xs-6 hidden-xs">6/12:TARGET</div>
    39             </div>
    40 
    41             <h2>列的偏移量</h2>
    42             <div class="row">
    43                 <div class="col-xs-3 col-xs-offset-6">XS-3</div>
    44                 <div class="col-xs-2 col-xs-offset-1">XS-2</div>
    45             </div>
    46 
    47 
    48         </div>       
    49             
    50         <script src="js/jquery-1.11.3.js"></script>
    51         <script>
    52             // Bootlint是一个html和Bootstrap代码检查工具
    53             (function(){
    54                 var s = document.createElement("script");
    55                 s.onload = function(){
    56                     bootlint.showLintReportForCurrentDocument([]);
    57                 };
    58                 s.src="js/bootlint.js";
    59                 document.body.appendChild(s)
    60             })();
    61         </script>
    62     </body>
    63 </html>
    View Code

    9、全局CSS样式 -- 表单相关样式  

      Bootstrap 提供了三种形式的表单:
        1)默认形式的表单:label和输入框分处两行
        2)行内形式的表单:所有的label和输入框都在同一行
        3)水平形式的表单:一个label和一个输入框在一行

       实例:

      

      1 <!DOCTYPE html>
      2 <html lang="zh-cn">
      3   <head>
      4     <meta charset="utf-8">
      5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6     <meta name="viewport" content="width=device-width, initial-scale=1">
      7     <title></title>
      8     <!-- Bootstrap -->
      9     <link href="css/bootstrap.css" rel="stylesheet">
     10     <!--[if lt IE 9]>
     11       <script src="js/html5shiv.min.js"></script>
     12       <script src="js/respond.min.js"></script>
     13     <![endif]-->
     14   </head>
     15   <body>
     16     <div class="container">
     17         <h1>全局CSS样式--表单相关样式</h1>
     18         <h2>1、默认表单</h2>
     19         <form>
     20             <div class="fo rm-group">
     21                 <label class="control-label" for="uname">用户名:</label>
     22                 <input type="text" id="uname" class="form-control">
     23                 <span class="help-block">用户名只能包含数字、字母、下划线</span>
     24             </div>
     25             <div class="form-group">
     26                 <label class="control-label" for="upwd">密码:</label>
     27                 <input type="password" id="upwd" class="form-control">
     28                 <span cl
     29                 ass="help-block">密码长度在6-18为之间</span>
     30             </div>
     31             <div class="checkbox">
     32                 <label>
     33                     <input type="checkbox">我同意本次的使用条款
     34                 </label>
     35             </div>
     36             <div class="form-group">
     37                 <input class="btn btn-success" type="button" value="提交">
     38                 <input class="btn btn-danger" type="button" value="清空">                    
     39             </div>
     40         </form>
     41 
     42         <h2>2、行内表单</h2>
     43         <form class="form-inline">
     44             <div class="form-group">
     45                 <label class="control-label sr-only" for="uname2">用户名:</label>
     46                 <input type="text" id="uname2" class="form-control" placeholder="Enter User Name">
     47             </div>
     48             <div class="form-group">
     49                 <!-- screen read only -->
     50                 <label class="control-label sr-only" for="upwd2">密码:</label>
     51                 <input type="password" id="upwd2" class="form-control" placeholder="Enter password">
     52             </div>
     53             <div class="form-group">
     54                 <input class="btn btn-success" type="button" value="提交">
     55                 <input class="btn btn-danger" type="button" value="清空">                    
     56             </div>
     57         </form>
     58 
     59         <h2>3、水平表单--一行中有label+input+提示</h2>
     60         <h3>水平表表单必须哦结合栅格布局系统一起使用</h3>
     61         <h3>水平表单中的栅格系统不同于普通栅格系统,.container->.form-horizontal, .row->.form-group</h3>
     62         <form class="form-horizontal">
     63             <div class="form-group">
     64                 <!-- <div class="col-xs-1"> -->
     65                 <!-- 若要使标签文本右对齐,则将类名col-xs-n写在label中 -->
     66                     <label class="control-label col-xs-1" for="uname3">用户名:</label>
     67                 <!-- </div> -->
     68                 <div class="col-xs-7">
     69                     <input type="text" id="uname3" class="form-control">                    
     70                 </div>
     71                 <div class="col-xs-4">
     72                     <span class="help-block">用户名只能包含数字、字母、下划线</span>
     73                 </div>
     74             </div>
     75             <div class="form-group">
     76                 <!-- <div class="col-xs-1"> -->
     77                     <label class="control-label col-xs-1" for="upwd">密码:</label>
     78                 <!-- </div> -->
     79                 <div class="col-xs-7">
     80                     <input type="password" id="upwd" class="form-control">
     81                 </div>
     82                 <div class="col-xs-4">
     83                     <span class="help-block">密码长度在6-18为之间</span>
     84                 </div>
     85             </div>
     86             <div class="form-group">
     87                 <div class="col-xs-10 col-xs-offset-1">
     88                     <div class="checkbox">
     89                         <label>
     90                             <input type="checkbox">我同意本次的使用条款
     91                         </label>
     92                     </div>
     93                 </div>
     94             </div>
     95             <div class="form-group">
     96                 <div class="col-xs-10 col-xs-offset-1">
     97                        <input class="btn btn-success" type="button" value="提交">  
     98                    </div>                 
     99             </div>
    100         </form>
    101 
    102     </div>
    103 
    104     <script src="js/jquery-1.11.3.js"></script>
    105     <script src="js/bootstrap.js"></script>
    106 </html>
    View Code

      

  • 相关阅读:
    zookeeper安装和使用
    一个最简单的Dubbo入门框架
    Dubbo Admin管理平台搭建
    Docker容器入门实践
    vue 项目安装 (入门)
    测试任何对象的某个特性是否存在 兼容js
    用户代理字符串检测呈现引擎、平台、Windows操作系统、移动设备和游戏系统 js
    React
    React (4) -- Conditional Rendering
    React (5) -- Lists and Keys
  • 原文地址:https://www.cnblogs.com/xlb-happymoment/p/6896424.html
Copyright © 2020-2023  润新知