第一次接触神奇的Bootstrap基础排版


Posted in Javascript onJuly 26, 2016

Bootstrap是Twitter推出的一个简单灵活的,基于HTML5和CSS3的用于搭建WEB前端页面的html、css、javascript工具集。拥有友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less等特点。Bootstrap让Web开发更迅速、更简单。

1.Bootstrap下载

官网:http://getbootstrap.com/;新手入门:http://getbootstrap.com/getting-started/

我们可以在官网下载到Bootstrap,Bootstrap的源码,如果不想下载,还可以使用Bootstrap提供的CDN。

2.Bootstrap文件结构
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

 3.Bootstrap的HTML标准模板

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <!-- 在IE运行最新的渲染模式 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- 初始化移动浏览显示,width=device-width宽度等于移动设备的宽度,initial-scale=1设置缩放比例 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap的HTML标准模板</title>
 <!-- 引入Bootstrap的核心CSS -->
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <!-- 你自己的样式文件 -->
 <link href="css/your-style.css" rel="stylesheet">
 <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <h1>Hello, world!</h1>
 <!-- 放置在文档的结尾,使页面加载速度更快 -->
 <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
 <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 </body>
</html>

4.Bootstrap的标题

和普通的HTML页面一样,Bootstrap定义标题也是使用标签h1到h6,只不过Bootstrap覆盖了其默认的样式,使其在所有浏览器下显示的效果是一样的,定义的具体规则如下表所示:

第一次接触神奇的Bootstrap基础排版

<!--Bootstrap中的标题-->
<h1>标题一</h1>
<h2>标题二</h2>
<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>标题一<small>副标题</small></h1>
<h2>标题二<small>副标题</small></h2>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">标题一</div>
<div class="h2">标题二</div>
<div class="h3">标题三</div>

注意:副标题行高都是1,font-weight不加粗,颜色为灰色(#999);h1~h3的副标题,大小为标题的65%,h4~h6的副标题,大小为标题的75%;详细代码请参阅bootstrap.css文件中第407行~第443行。

5.Bootstrap的内容

1)强调内容

在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。

通过添加类名“.lead”让一个段落p突出显示,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。用法如下:

<p>普通文本</p>
<p class="lead">强调文本</p>

2)通过颜色来表示强调

第一次接触神奇的Bootstrap基础排版

例如:
<!--下面普通文本为褐色-->
<p class="text-danger">普通文本</p>

 3)粗体和斜体

粗体使用b标签或strong标签来实现;斜体使用em标签或i标签来实现。

<!--粗体-->
<p>普通文本<b>粗体</b>普通文本</p>
<p>普通文本<strong>粗体</strong>普通文本</p>

<!--斜体-->
<p>普通文本<em>斜体</em>普通文本</p>
<p>普通文本<i>斜体</i>普通文本</p>

4)文本对齐

Bootstrap通过定义四个类名来控制文本的对齐风格:

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>

6.Bootstrap的列表

Bootstrap根据平时的使用情形提供了六种形式的列表:普通列表、有序列表、去点列表、内联列表、定义列表、水平定义列表。

1)普通列表

<!--普通列表-->
<ul>
 <li>普通列表1</li>
 <li>普通列表2</li>
</ul>

2)有序列表

<!--有序列表-->
<ol>
 <li>有序列表1</li>
 <li>有序列表2</li>
</ol>
<!--有序列表嵌套-->
<ol>
 <li>有序列表1</li>
 <li>有序列表2
 <ol>
 <li>有序列表2.1</li>
 <li>有序列表2.2</li>
 </ol>
 </li>
 <li>有序列表3</li>
</ol>

3)去点列表

给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

<ol class="list-unstyled">
 <li>有序列表1</li>
 <li>有序列表2</li>
</ol>

4)内联列表(为制作水平导航而生)

像去点列表一样,通过添加类名“.list-inline”来实现内联列表,把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。

<ul class="list-inline">
 <li>导航栏条目1</li>
 <li>导航栏条目2</li>
</ul>

5)定义列表

Bootstrap定义列表只是调整了行间距,外边距和字体加粗效果。

<dl>
 <dt>北京</dt>
 <dd>中国的首都。</dd>
 <dt>上海</dt>
 <dd>国家中心城市,超大城市。</dd>
</dl>

6)水平定义列表

水平定义列表就像内联列表一样,Bootstrap可以给dl标签添加类名“.dl-horizontal”给定义列表实现水平显示效果。

<dl class="dl-horizontal">
 <dt>北京</dt>
 <dd>中国的首都。</dd>
 <dt>上海</dt>
 <dd>国家中心城市,超大城市。</dd>
</dl>

7.Bootstrap的表格

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。具体如下:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>基础表格</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
 <h3>基础表格</h3>
 <!-- 主要源码查看bootstrap.css文件第1402行~第1441行 -->
 <table class="table">
 <thead>
 <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr>
 </thead>
 <tbody>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 </tbody>
 </table>

 <h3>斑马线表格</h3>
 <!-- 主要源码查看bootstrap.css文件第1465行~第1468行 -->
 <table class="table table-striped">
 <thead>
 <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr>
 </thead>
 <tbody>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 </tbody>
 </table>

 <h3>带边框的表格</h3>
 <!-- 主要源码查看bootstrap.css文件第1450行~第1464行 -->
 <table class="table table-bordered">
 <thead>
 <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr>
 </thead>
 <tbody>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 </tbody>
 </table>

 <h3>鼠标悬浮高亮的表格</h3>
 <!-- 主要源码查看bootstrap.css文件第1469行~第1472行 -->
 <table class="table table-striped table-bordered table-hover">
 <thead>
 <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr>
 </thead>
 <tbody>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 </tbody>
 </table>

 <h3>紧凑型表格</h3>
 <!-- 主要源码查看bootstrap.css文件第1442行~第1449行 -->
 <table class="table table-condensed">
 <thead>
 <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr>
 </thead>
 <tbody>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 </tbody>
 </table>

 <h3>响应式表格</h3>
 <!-- Bootstrap提供了一个类名为.table-responsive的容器,置于此容器的表格就具有响应式效果 -->
 <div class="table-responsive">
 <table class="table table-bordered">
 <thead>
 <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr>
 </thead>
 <tbody>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr>
 </tbody>
 </table>
 </div>
</body>
</html>

这部分代码包含了Bootstrap常用的表格,效果图如下所示:

第一次接触神奇的Bootstrap基础排版

Bootstrap还为表格的行元素tr提供了五种不同的类名(对应的源码,请查看bootstrap.css文件中第1484行~第1583行),每种类名控制了行的不同背景颜色,具体说明如下表所示:

第一次接触神奇的Bootstrap基础排版

其使用非常的简单,只需要在元素中添加上表对应的类名,就能达到效果:

<tr class="active"><td>…</td></tr>

注意:
1.要实现悬浮状态,需要在<table>标签上加入table-hover类。
2.除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

系列文章:

第一次接触神奇的Bootstrap网格系统https://3water.com/article/89333.htm

第一次接触神奇的Bootstrap表单https://3water.com/article/89330.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
Js基础学习资料
Nov 23 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
js获取html的span标签的值方法(超简单)
Jul 26 #Javascript
js无法获取到html标签的属性的解决方法
Jul 26 #Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 #Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 #Javascript
js判断空对象的实例(超简单)
Jul 26 #Javascript
全面了解构造函数继承关键apply call
Jul 26 #Javascript
JS面试题---关于算法台阶的问题
Jul 26 #Javascript
You might like
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
JS实现self的resend
2010/07/22 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Python入门篇之函数
2014/10/20 Python
Python 闭包的使用方法
2017/09/07 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
tensorflow的计算图总结
2020/01/12 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
机关搬迁方案
2014/05/18 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
先进典型事迹材料
2014/12/29 职场文书
2015年外联部工作总结
2015/04/03 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
微信小程序调用python模型
2022/04/21 Python
使用CSS实现音波加载效果
2023/05/07 HTML / CSS