第一次接触神奇的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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
vue 插槽简介及使用示例
Nov 19 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
用缓存实现静态页面的测试
2006/12/06 PHP
PHP PDO函数库详解
2010/04/27 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
js禁止表单重复提交
2017/08/29 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
python使用psutil模块获取系统状态
2016/08/27 Python
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
大学开学计划书
2014/04/30 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
初中家长意见
2015/06/03 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python