标签：管理 ali line eth color uid sel 用户 div
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>
标签：管理 ali line eth color uid sel 用户 div
原文地址：https://www.cnblogs.com/louyifei0824/p/9571421.html
