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>
元素都将被默认设置宽度属性为 width: 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>