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>
Bootstrap框架整理的更多相关文章
- Web前端学习笔记:Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
- Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改
Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...
- PHP实战 新闻管理系统 使用到了bootstrap框架
刚刚接触 PHP 仿照视频 写了个新闻管理系统 当中也使用到了bootstrap框架 写下来整理一下思路. 这是个非常easy的系统.首先是建立数据库表. mysql>create databa ...
- Bootstrap框架的学习(一)
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
- .NET平台常用的框架整理
基于.NET平台常用的框架整理 DotNet | 2016-03-31 17:13 (点击上方蓝字,可快速关注我们) 来源:天使不哭 链接:http://www.cnblogs.com/hgmyz/p ...
- 基于BootStrap框架构建快速响应的GPS部标监控平台
最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...
- BootStrap框架
简介: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,是一个CSS ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
随机推荐
- favorite learning link
Xpath https://www.cnblogs.com/chenshaoping/p/5540434.html Awk Sort https://www.cnblogs.com/chengmo/a ...
- keras实现textcnn
https://github.com/MoyanZitto/keras-cn/blob/master/docs/legacy/blog/word_embedding.md 这个链接将带有embedin ...
- vue 中使用 axios 请求接口,请求会发送两次问题
在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果:只有第二次请求时才会有相应的请求参数以及请求结果: 那为甚么会有这么一次额外的请求呢,后 ...
- 甘特图 (Gantt )的优缺点
时间管理 - 甘特图 (Gantt ) 优点:甘特图直观.简单.容易制作,便于理解,能很清晰地标识出直到每一项任务的起始与结束时间,一般适用比较简单的小型项目,可用于WBS的任何层次.进度控制.资源优 ...
- 基于usb4java的usb通讯
下载java API及lib库地址:http://usb4java.org/index.html 1.导入所需要的库: 2.添加配置文件:文件名:javax.usb.properties:内容:jav ...
- #WEB安全基础 : HTTP协议 | 0x8 HTTP的Cookie技术
说道Cookie,你喜欢吃饼干吗? 这里的Cookie不是饼干=_= HTTP不对请求和响应的通信状态进行保存,所以被称为无状态协议,为了保持状态和协议功能引入了Cookie技术 Cookie技术在请 ...
- ASP.NET MVC案例教程(五)
ASP.NET MVC案例教程(四) 前言 通过前几篇文章,我们已经能比较自如的使用ASP.NET MVC来呈现页面和数据了.但是,有一个大问题没有解决:如何处理表单数据.例如,我们将要实现的公告发布 ...
- CentOS6.5系统,mysql数据库的安装
1.查看数据库中已安装的版本: [mdata@bogon ~]$ yum list installed|grep mysqlmysql-libs.x86_64 5.1.71-1.el6 @anacon ...
- oracle(2)
create table aaa( id number, name varchar2(100) ); select decode((select max(id) from aaa),null,'x', ...
- 破解网页右键被禁止js
按F12,点击console输入一下内容后按回车 javascript:alert(document.onselectstart = document.oncontextmenu= document. ...