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

    一.栅格系统

    • 将所在父级的宽度等分为12等分

    • 四种屏幕尺寸 col-xs- | col-sm- | col-md- | col-lg-

    • 偏移 col-xs-offset- | ... | col-lg-offset-

    <div class="row">
       <div class="ele1 col-lg-4 col-xs-6"></div>
       <div class="ele2 col-lg-4 col-lg-offset-4 col-xs-6"></div>
    </div>
    <!-- 超大屏幕下: ele1占4等分 ele2与ele1间隔4等分,自己也占4等分 -->
    <!-- 在超小,小,中等屏幕下, ele1与ele2均占6等分 -->

    二.移动端屏幕适配


    <meta name="viewport" content="width=device-width, user-scaleable=no" />
    <!-- 适配移动端设备的每一个页面均需要设置 -->

    三.组件

    • 表格


    <!--striped条纹 bordered边框 hover悬浮-->
    <table class="table table-striped table-bordered table-hover">
       <tr style="text-align: center">
           <th>标题</th>
           <th>标题</th>
           <th>标题</th>
       </tr>
       <tr>
           <td>单元格</td>
           <td>单元格</td>
           <td>单元格</td>
       </tr>
       <!-- 颜色强调,整行tr 或 单元格 th|td -->
       <tr class="success">
           <td>单元格</td>
           <td>单元格</td>
           <td>单元格</td>
       </tr>
       <tr>
           <td>单元格</td>
           <td class="danger">单元格</td>
           <td>单元格</td>
       </tr>
       <tr>
           <td>单元格</td>
           <td class="info" colspan="2" style="text-align: center">单元格</td>
           <!--<td>单元格</td>-->
       </tr>
    </table>
    • 表单

    <form action="">
       <!-- 分行: form-group -->
       <div class="form-group">
           <!--label的for是关联匹配的input的id, 当label点击时会让input获取焦点-->
           <label for="usr">用户名:</label>
           <!-- form-control: bs控制 -->
           <input class="form-control" type="text" name="usr" id="usr">
       </div>
       <div class="form-group">
           <label for="pwd">密码:</label>
           <input class="form-control" type="password" name="pwd" id="pwd">
       </div>
       <div class="form-group checkbox">
           <!--复选框-->
           <label>
               <input type="checkbox" value="reading" name="sk">请阅读
           </label>
       </div>
    </form>

    <!-- 内联表单 -->
    <form class="form-inline"></form>

    <!-- label与input同行显示 -->
    <form action="" class="form-horizontal">
       <div class="form-group has-warning">
           <label for="usr2" class="col-sm-2 control-label">用户名:</label>
           <div class="col-sm-10">
               <input type="text" class="form-control" name="usr2" id="usr2" placeholder="请输入用户名">
           </div>
       </div>
    </form>
    • 按钮 | 字体图标 ...

  • 相关阅读:
    CF521D Shop
    AGC033D Complexity
    CF576D Flights for Regular Customers
    LG4781 【模板】拉格朗日插值
    洛谷3288 SCOI2014方伯伯运椰子(分数规划+spfa)
    洛谷4606 SDOI2018战略游戏(圆方树+虚树)
    洛谷4630APIO2018铁人两项(圆方树+dp)
    CF487E Tourists + 圆方树学习笔记(圆方树+树剖+线段树+multiset)
    CF193D Two Segments (线段树+dp)(外加两个扩展题)
    洛谷4322 SHOI2014 三叉神经树(LCT+思维)
  • 原文地址:https://www.cnblogs.com/zhouhai007/p/10211631.html
Copyright © 2011-2022 走看看