BootStrap的table表格,栅格系统,form表单的样式

BootStrap

BootStrap的简介

1.    什么是Bootstrap

由两个前端设计师开发的一个前端的框架(Html,css,js)

简化了程序员写css的代码

2.    为什么使用BootStrap,有什么特点

l  学习比较简单,有了Html,css和js就能学习

l  响应式布局,可以适应多种的设备

l  移动设备优先

BootStrap的使用

环境的安装

官网上下载包

要想使用bootStrap 必须加载jquery

bootStrap的基本模板

1.     Html文档的类型定义

BootStrap的文档是基于HTML5的,因此,要使用HTML的文档类型定义(DTD)

2.     字符集的设置

<meta charset="utf-8">

3.     移动设备优先

<meta name="viewport" content="width=device-width,initial-scale=1">

4.     引入css和js文件

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

Css全局样式

1.布局容器样式

l  .container 固定宽度且具有响应式

l  .container-fluid *宽度(100%)

<div class="container">

3.    样式:<h1>到<h6>、h1~h6

H1~H6 样式重写的,几乎做到了兼容性

3.文本样式

1.  <b>:加粗

2. <strong>:加粗

3. <i>:斜体

4. <em>:斜体,HTML5新标记

5. <del>:删除线,HTML5新标记

6. <s>:删除线

4.    文本对齐样式

1、  .text-left           本左对齐

2、  .text-right         文本右对齐

3、  .text-center     文本居中对齐

4、  .text-justify      两端对其

5.    列表样式

1、  .list-unstyled    无符号

2、  .list-inline                   行内样式

6.    表格样式

1、.table:表格全局样式(少量的padding和水平方向的分割线)。

2、.table-striped:有条纹的背景色行(隔行变色)

3、.table-boedered:点边框的表格

4、.table-hover:鼠标悬停效果(放上变色、离开恢复)

5、.table-condensed:紧凑的表格(单元格内不会减半)

6、行或单元格背景色:.active、.success、.info、.warning、.danger

.active 当前样式

.success

.info

.warning

.danger

注意只能给<tr><td>添加颜色

7、响应式表格

将.table元素包裹在.table-responsive元素内,即可创建响应式表格

当屏幕宽度小于你的表格的时候,表格会出现滚动条

当屏幕宽度大于你的表格的时候,表格的滚动条自然消失

7.    表单样式

1、.form-group 表单组样式:将<label>和表单元素包含其中,你可以获得更好的排列。

2、.form-control 表单元素:常用于<input>、<textarea>、<select>元素

alceholder属性:给<input>添加提示信息

3、.form-inline 内联表单样式(用于form元素):可以使元素一行排列

4、.sr-only:用于隐藏元素

5、.radio-inline 可以使一组单选框排在同一行

6、.checkbox-inline 可以使一组复选框排在同一行

7、.checkbox 复选框样式

8、.radio 单选框样式

9、.disable 可以禁用单选框或者复选框的样式

10、.help-block 帮助信息(与上面间隔,字体颜色变浅)

CSS的全局样式----栅格系统

栅格系统介绍

BootStrap提供了一套响应式、移动设备优先的流式的栅格系统

BootStrap把一个容器或整个网页平均分成12列

BootStrap的栅格系统,由一个行(.row)和多个列组成

栅格系统通过行列的形式来创建网页的布局,把具体的数据放入列当中

注意:栅格系统必须放在.container和.container-fluid之中

栅格系统参数

Col-xs-* 超小屏幕

Col-sm-*小屏幕

Col-md-*中等屏幕

Col-lg-*大屏幕

栅格系统的简单应用

注意:列数超过12列会自动换行

列偏移

也就是指:一个栏向右偏移多少

.col-md-offset-*

.col-md-offset-2  //指定栏向右偏移2个列 思想就是加上了一个左外边距

列嵌套

在某个栏中再嵌套一个完整栅格系统

8.    按钮样式:

1、  可作为按钮使用的元素:<a> 、<input>、<button>

2、  .btn:按钮的全局样式 <input type=”button” class=”btn”>

3、  预定义样式:.btn-default、.btn-primary、.btn-info、.btn-waring、.btn-danger、.btn-link

4、  .active 按钮激活状态、.disabled 按钮禁用样式

5、  按钮尺寸:.btn-lg(大按钮)、.btn-sm(小按钮)、.btn-xs(超小按钮)

6、  .btn-block:将按钮拉伸到撑满整个父元素

上一篇:[转]bootstrap的table插件动态加载表头


下一篇:BootStrap的table表格的基本写法