整理关于Bootstrap排版的慕课笔记


Posted in Javascript onMarch 29, 2017

整理自慕课笔记

GitHub上这样介绍 bootstrap:

  • 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
  • 基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。
  • 自定义JQuery插件,完整的类库,基于Less等。

标题

主标题

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

整理关于Bootstrap排版的慕课笔记

通过比较可以发现,Bootstrap标题样式进行了以下显著的优化重置:

1、重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px;h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。

标题的具体运用非常简单,和我们平时运用是一样的,使用 <h1> ~ <h6> 标签,分别表示标题一至标题六,h 后面的数字越大,表示级别越小,文本也越小。来看一个简单的效果:右侧代码编辑器中的10-16行的代码。

在Bootstrap中为了让非标题元素和标题使用相同的样式,还特意定义了.h1~.h6六个类名。

副标题

除此之外,我们在Web的制作中,常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果,使用了标签来制作副标题。这个副标题具有其自己的一些独特样式:

1、行高都是1,而且font-weight设置了normal变成了常规效果(不加粗),同时颜色被设置为灰色(#999)。
2、由于内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;
详细代码请参阅bootstrap.css文件中第407行~第443行。

段落

段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本):

1、全局文本字号为14px(font-size)。

2、行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能)。

3、颜色为深灰色(#333);

4、字体为”Helvetica Neue”, Helvetica, Arial, sans-serif;(font-family),或许这样的字体对我们中文并不太合适,但在实际项目中,大家可以根据自己的需求进行重置,在此我们不做过多阐述,我们回到这里。该设置都定义在元素上,由于这几个属性都是继承属性,所以Web页面中文本(包括段落p元素)如无重置都会具有这些样式效果。

/源码请查看bootstrap.css文件中第274行~280行/

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

强调内容

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

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

<p>我是普通文本,我的样子长成这样我是普通文本,我的样子长成这样我是普通文本,</p>
<p class="lead">我是特意要突出的文本,我的样子成这样。我是特意要突出的文本,我的样子长成这样。</p>

除此之外,Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。

粗体

粗体就是给文本加粗,在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中,可以使用和标签让文本直接加粗。

斜体

在排版中,除了用加粗来强调突出的文本之外,还可以使用斜体。斜体类似于加粗一样,除了可以给元素设置样式font-style值为italic实现之外,在Bootstrap中还可以通过使用标签<em>或<i>来实现。
例如,下面的代码使用了<em>和<i>标签定义了强调文本:

强调相关的类

在Bootstrap中除了使用标签、等说明正文某些字词、句子的重要性,Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下:

text-muted:提示,使用浅灰色(#999)
text-primary:主要,使用蓝色(#428bca)
text-success:成功,使用浅绿色(#3c763d)
text-info:通知信息,使用浅蓝色(#31708f)
text-warning:警告,使用黄色(#8a6d3b)
text-danger:危险,使用褐色(#a94442)

文本对齐风格

在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格:

☑ 左对齐,取值left

☑ 居中对齐,取值center

☑ 右对齐,取值right

☑ 两端对齐,取值justify

为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格:

.text-left:左对齐

.text-center:居中对齐

.text-right:右对齐

.text-justify:两端对齐

特别声明:目前两端对齐在各浏览器下解析各有不同,特别是应用于中文文本的时候。所以项目中慎用。

列表

在HTML文档中,列表结构主要有三种:有序列表、无序列表和定义列表。具体使用的标签说明如下:

无序列表

Bootstrap对于列表,只是在margin上做了一些调整。

<ul>
 <li>…</li>
</ul>

有序列表

<ol>
 <li>…</li>
</ol>

定义列表

对于定义列表而言,Bootstrap并没有做太多的调整,只是调整了行间距,外边距和字体加粗效果。

<dl>
 <dt>…</dt>
 <dd>…</dd>
</dl>
<dl>
 <dt>北京</dt>
 <dd>北京是中国的首都,是政治文化集中地</dd>
 <dt>上海</dt>
 <dd>经济中心</dd>
</dl>

水平定义列表

水平定义列表就像内联列表一样,Bootstrap可以给

添加类名“.dl-horizontal”给定义列表实现水平显示效果。
/源码请查看bootstrap.css文件第608行~第621行/

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
 }
.dl-horizontal dd {
margin-left: 180px;
 }
}

此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式:
1、将dt设置了一个左浮动,并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px,达到水平的效果
3、当标题宽度超过160px时,将会显示三个省略号

宽屏下的效果(屏幕大于768px):

整理关于Bootstrap排版的慕课笔记

当你缩小你的浏览器屏幕时,水平定义列表将回复到原始的状态。

整理关于Bootstrap排版的慕课笔记

## 去点列表
在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的,但在实际工作中很多时候,我们的列表是不需要这个编号的,比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。除了项目编号之外,还将列表默认的左边内距也清0了。

## 内联列表
Bootstrap像去点列表一样,通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。

## 描述列表

水平描述列表

代码

本节内容相对来说比较简单,一般在个人博客上使用的较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格:
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码: <pre>元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
3、使用<kbd></kbd>来显示用户输入代码

注意: 不管使用哪种代码风格,在代码中碰到小于号<要使用硬编码<来替代,大于号>使用>来替代。而且对于<pre>代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。建议在编写HTML标签时,就控制好。

表格

表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。
* .table:基础表格
* .table-striped:斑马线表格
* .table-bordered:带边框的表格
* .table-hover:鼠标悬停高亮的表格
* .table-condensed:紧凑型表格
* .table-responsive:响应式表格

表格行的类

Bootstrap还为表格的行元素提供了五种不同的类名,每种类名控制了行的不同背景颜色,具体说明如下表所示:

整理关于Bootstrap排版的慕课笔记

其使用非常的简单,只需要在元素中添加上表对应的类名,就能达到你自己需要的效果
特别提示:除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。
注意要实现悬浮状态,需要在

标签上加入table-hover类

基础表格

对表格的结构,跟我们平时使用表格是一样的:

<table>
<thead>
<tr>
<th>表格标题</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
…
</tr>
  …
</tbody>
</table>

在Bootstrap中,对于基础表格是通过类名“.table”来控制。如果在

元素中不添加任何类名,表格是无任何样式效果的。想得到基础表格,我们只需要在
元素上添加“.table”类名,就可以得到Bootstrap的基础表格
“.table”主要有三个作用:
1. 给表格设置了margin-bottom:20px以及设置单元内距
2. 在thead底部设置了一个2px的浅灰实线
3. 每个单元格顶部设置了一个1px的浅灰实线

斑马线表格

有时候为了让表格更具阅读性,需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难,只需要在

的基础上增加类名“.table-striped”即可。其效果与基础表格相比,仅是在tbody隔行有一个浅灰色的背景色。其实现原理也非常的简单,利用CSS3的结构性选择器“:nth-child”来实现,所以对于IE8以及其以下浏览器,没有背景条纹效果。

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

带边框的表格

基础表格仅让表格部分地方有边框,但有时候需要整个表格具有边框效果。Bootstrap出于实际运用,也考虑这种表格效果,即所有单元格具有一条1px的边框。
Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似,只需要在基础表格

基础上添加一个“.table-bordered”类名即可:

<table class="table table-bordered">
 …
</table>

鼠标悬浮高亮的表格

当鼠标悬停在表格的行上面有一个高亮的背景色,这样的表格让人看起来就是舒服,时刻告诉用户正在阅读表格哪一行的数据。Bootstrap的确没有让你失望,他也考虑到这种效果,其提供了一个“.table-hover”类名来实现这种表格效果。
鼠标悬停高亮的表格使用也简单,仅需要

元素上添加类名“table-hover”即可:

<table class="table table-hover">
…
</table>

整理关于Bootstrap排版的慕课笔记

注:其实,鼠标悬浮高亮表格,可以和Bootstrap其他表格混合使用。简单点说,只要你想让你的表格具备悬浮高亮效果,你只要给这个表格添加“table-hover”类名就好了。例如,将前面介绍的几种表格结合使用:

<table class="table table-striped table-bordered table-hover">
…
</table>

紧凑型表格

何谓紧凑型表格,简单理解,就是单元格没内距或者内距较其他表格的内距更小。换句话说,要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中,通过类名“table-condensed”重置了单元格内距值。
紧凑型表格的运用,也只是需要在

基础上添加类名“table-condensed”:

<table class="table table-condensed">
…
</table>

整理关于Bootstrap排版的慕课笔记

从上面效果图可以看出,Bootstrap中紧凑型的表格与基础表格差别不大,因为只是将单元格的内距由8px调至5px。

另外从上面的示例中大家可能也发现了,不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时,千万注意,你的

元素中一定不能缺少类名“table”。

响应式表格

随着各种手持设备的出现,要想让你的Web页面适合千罗万像的设备浏览,响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果,将其称为响应式表格。

Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将

置于这个容器当中,这样表格也就具有响应式效果。

Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。示例如下:

<div class="table-responsive">
<table class="table table-bordered">
  …
</table>
</div>

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

Javascript 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
分析javascript原型及原型链
Mar 18 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
js实现页面图片消除效果
Mar 24 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
如何使用Bootstrap创建表单
Mar 29 #Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 #Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 #Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 #jQuery
详解如何使用Vue2做服务端渲染
Mar 29 #Javascript
You might like
信用卡效验程序
2006/10/09 PHP
php 中英文语言转换类
2011/09/07 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP.vs.JAVA
2016/04/29 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
javascript 判断整数方法分享
2014/12/16 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
js实现下一页页码效果
2017/03/07 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
javascript回调函数详解
2018/02/06 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
基于python实现简单日历
2018/07/28 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python+requests接口自动化框架的实现
2020/08/31 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
集团薪酬管理制度
2014/01/13 职场文书
小学教师管理制度
2014/01/18 职场文书
学生检讨书范文
2015/01/27 职场文书
董事长开业致辞
2015/07/29 职场文书
音乐研修感悟
2015/11/18 职场文书
Python图像处理之图像拼接
2021/04/28 Python