栅格系统

Posted 2021-01-31 zhouhai007

一.栅格系统

• 将所在父级的宽度等分为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>

• 按钮 | 字体图标 ...