Bootstrap框架整理

bootstrap框架的介绍

栅格系统

bootstrap框架把整个浏览器的宽度分为12列，并能适配各种屏幕的尺寸大小进行相应的匹配，达到调节页面大小的效果。

首先需要放置一个容器div，class='container',这样会给页面的两边留白，如果要占满整个屏幕那么可以设置class='container-fluid'。

通过“行（row）”在水平方向创建一组“列（column）”。

内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

栅格参数

	超小屏幕<768px	小屏幕（平板）>=768px	中等屏幕(桌面显示器)>=992PX	大屏幕(大桌面显示器)>=1200px
类前缀	.col-xs	.col-sm	.col-md	.col-lg

列偏移

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

col-md-offset-3：指的是向右偏移3列，可以很好的帮助我们进行页面布局

排版

提供了.h1到.h6类,为的是给内联（inline）属性的文本赋予标题的样式。

对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

表格

<table class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th>id</th>
            <th>用户名</th>
            <th>密码</th>
            <th>联系电话</th>
            <th>地址</th>
        </tr>
        </thead>
        <tbody>
        {% for user_obj in user_list %}
            <tr>
                <td>{{ user_obj.id }}</td>
                <td>{{ user_obj.username }}</td>
                <td>{{ user_obj.password }}</td>
                <td>{{ user_obj.call_phone }}</td>
                <td>{{ user_obj.address }}</td>
            </tr>
        {% endfor %}
        </tbody>
</table>

给表格设置各种样式，见名知意。

状态类

通过状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

 

 

表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为  100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

不要将表单组直接和输入框混合使用。建议将输入框组嵌套到表单组中使用。

 <div id="box" class="row">
        <h1 class="col-md-offset-4" style="margin-bottom:100px">管理员登录</h1>
        <form action="/show_user_info/" method="post" class="col-md-4 col-md-offset-4 " >
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" class="form-control" name="username">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" class="form-control" name="password">
            </div>
            <button class="btn btn-default" type="submit">登录</button>
        </form>
        <div class="text-danger col-md-offset-4 col-md-8" style="margin-top: 50px">{{ error }}</div>
    </div>