首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

第一次接触神奇的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

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

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

- Author -

smartbetter

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
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
GZIP(2) 幻读(5) 经纬度(1) 复读(1) IIS7(1) MVCC(4) innoDB(3) 间隙锁(2) DBLink(1) 事务并发(1)
You might like
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
JavaScript 继承详解（二）
2009/07/13 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
express express-session的使用小结
2018/12/12 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
浅谈Python的文件类型
2016/05/30 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
eBay法国购物网站：eBay.fr
2017/10/21 全球购物
澳大利亚购买最佳炊具品牌网站：Cookware Brands
2019/02/16 全球购物
优秀教师先进事迹
2014/01/22 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
加入学生会演讲稿
2014/04/24 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
怎样写辞职信
2015/02/27 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库