BootStrap 的随笔一二三

正在学习中待补充 。。为自己日后查看留存,不喜误看

特别鸣谢,小霖,小涛,小海...

Bootstrap总结

 

可实现的页面效果

导航、格栅分为12份,焦点图,按钮,响应式,下拉按钮,选项卡等

 

bootstrap布局

  网格系统:

  预定义的网格类

  .row

  .col-xs-4

  .col-sm-4

  .col-md-4

  .col-lg-4

  可用于快速创建网格布局

  其中.col-xs-*用户布局额外小的设备,小于768px

  .col-sm-*用于布局小型设备,768px起

  .col-md-*用于布局中型设备,992px起

  .col-lg-*用于布局大型设备,1200px起

偏移列

为了能在大屏幕显示器上使用便宜,使用.col-md-offset-*类,这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。

 

3.嵌套列

  为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列 内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列总计达 12。

4.列排序

Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。

5排版

Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。

如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 <small>,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本

为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗、行高更高的文本

HTML 的默认强调标签 <small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)

HTML 元素提供了用于缩写的标记,比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 <abbr> title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到 <abbr>

表格

Bootstrap提供了清晰的创建表格的布局

<table> 容纳以表格形式显示数据的元素

<thead> 表格标题行的容器元素<tr>,用来标识表格列

<tbody> 表格主题中的表格行的容器元素<tr>

<tr> 一组出现在单行的表格单元格的容器元素

<td> 默认的表格单元格

<th> 特殊的表格单元格,位于<thead>内使用

<caption> 关于表格存储内容的描述

 

6 先引入一下组件

<!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

 

在标签中引入class类例如:

<table class="table table-striped">  ...</table>

.active

.success

.info

.warning

.danger

设置单元格的颜色

 

 

 

原文地址:https://www.cnblogs.com/lh52web/p/3899593.html