视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Bootstrap入门书籍之(一)排版_javascript技巧
2020-11-27 20:50:57 责编:小采
文档
 推荐阅读:Bootstrap入门书籍之(零)Bootstrap简介

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。

1. 标题

在Bootstrap中使用标题的方式和常规html一样:从

分别从大到小安排标题元素,只不过在Bootstrap中重新设置了其默认样式,从源码中可以看到有如下共性:

字体颜色与字体样式继承自父元素,字体粗细为500,且行高全部设为1.1(也就是font-size的1.1倍)



在不同大小的标题中有着如下区别:

在Bootstrap中对于不同级别标题字体大小设置为: h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。

重新设置了 margin-top 和 margin-bottom 的值, h1~h3 重置后的值都是 20px ; h4~h6 重置后的值都是 10px 。

除此之外在Bootstrap中为了 让非标题元素和标题使用相同的样式 ,还特意定义了 .h1~.h6 六个类名。如下所示:

在Bootstrap中,下面的代码,显示效果相同。



因为在实际应用中,我们可能经常会遇到除了主标题外,之后紧跟着一个副标题的情况。Bootstrap人性化的为我们设置了这样一个效果。使用方式也特别简单,如下:



当然毋庸置疑的是,从

都可以使用该设置。副标题 有着自己一些独特的样式:

行高全部都设置为了1,而且字体粗细变成了常规效果(不加粗),同时颜色被设置为灰色( #999 )。
在h1~h3内的 标签文本,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;

2. 正文文本

Bootstrap中的文本全局样式如下:

字体大小为14px
行高为1.42867143(约等于20px)
字体颜色为 #333
p标签外部有着10个像素的下外边距 margin-bottom:10px;
当然,你是可以自行设置重置样式的。^_^

3. 强调

字体风格相关



强调相关的类

在Bootstrap中定义了一系列的这样的类,用于不同的情景,出去text外,还有bg(背景颜色)等等。使用方法类似,只是前面的文本进行了一些改变!所以。 记住这6个单词吧



4. 文本对齐风格



在Bootstrap中,为了简化操作,方便使用,使用了上面这四个类分别对应我们在CSS中常常使用 text-align 来实现文本的对齐风格的设置。

5. 列表

在Bootstrap中对于列表的设置与原生的html基本一致,需要注意的有:

在列表之间有10px的下外边距

在嵌套列表中,不含有下边距

Bootstrap当然不会就这么简单做一点点修改,它定义了一些关于列表的类给我们使用。

去点列表 .list-unstyled



从源码中,我们可以看到这样的信息,它除了将项目编号去除之外,还将默认的左边距也清除掉了。



在这样一段代码中,三个列表项会整齐的 排列在一起 ,且都没有 项目符号

内联列表 .list-inline

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

水平定义列表 .dl-horizontal

现有代码如下:



在浏览器全屏显示中可以看到效果如下:


我们来把屏幕大小进行改变,在遇到一个临界值时(小屏),水平定义列表将回复到原始的状态,如下改变:


这是为什么呢?我们去看看源码吧!

原来在这里添加了一个媒体查询,只有 屏幕大于768px 的时候,添加类名 .dl-horizontal 才具有水平定义列表效果。其实现主要方式:

将dt设置了一个左浮动,并且设置了一个宽度为160px
将dd设置一个margin-left的值为180px,达到水平的效果
当标题宽度超过160px时,将会显示三个省略号
现在再看看上面的效果是不是和这里的描述都是一样的呢?答案当然是肯定的 ^ ^

6. 代码

在Bootstrap主要提供了三种代码风格:

使用 来显示单行内联代码——针对于 单个单词或单个句子 的代码
使用

 来显示多行块代码——针对于 多行代码 (也就是成块的代码)
使用 来显示用户输入代码——表示 用户要通过键盘输入的内容

直接来看效果吧!


代码如下:(需要注意的是,**不管使用哪种代码风格,在代码中碰到小于号( < )和大于号( > )都需要使用转义字符来替代)

code风格:



pre风格:




kbd风格:



 元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在 pre标签 上添加类名 .pre-scrollable ,就可以控制代码块区域 最大高度为340px ,一旦超出这个高度,就会在 Y轴(纵向)出现滚动条。

当然,你也可以进行自定义配置,例如:只需要在自定义的css中,对于该类添加一个 word-wrap: normal; ,这样的话,在代码块边框横向宽度小于内部代码横向长度时,就会出现横向滚动条。

7. 表格

表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了 1种基础样式 和 4种附加样式 以及 1个支持响应式的表格 。

对应上面所说的,Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:

.table 基础表格
.table-striped 斑马线表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停高亮的表格
.table-condensed 紧凑型表格
.table-responsive 响应式表格

.table 主要有三个作用:

给表格设置了margin-bottom:20px以及设置单元内距
在thead底部设置了一个2px的浅灰实线
每个单元格顶部设置了一个1px的浅灰实线
具体大家可以在源码中查看,后几种附加的样式在这里也不多说,但是下面说一些 注意事项:

后几种表格附加样式,必须在基础样式 .table 之后,例如


响应式表格:其原理是在表格 外部添加容器 把普通表格 包裹 起来,下面进行详细说明:

下面是宽屏的效果(和普通的表格无区别):


此处是窄屏的效果(可以看到滚动条的出现):


表格行的类,表格情景

在上面已经说到了在Bootstrap中,为不同的情景做了不一样的颜色,用于不同的信息展示。只是在类名上做了一些小小的改变。下面就可以看到:


只需要在

标签添加上这些类就可以使用了。

除此之外,通过源码可以看到,在这些颜色设置之外,Bootstrap还单独设置了 hover效果(悬浮状态) 的 颜色加深 效果(它对于不同的情况单独进行了颜色设置)。

实现也特别简单,只需要像

这样,在
标签加上一个 table-hover 的类。(在未对 进行情景颜色设置时,该类依然有效果,只是效果不一样,上面已经说到了,因为它的单独设置,具体请到源码中查看)

也正因为这样,如果你想自定义颜色的话, 除了修改 tr 元素的颜色样式外,在 .table-hover 表格中也要做相应的调整!

排版的内容到这里就结束了,希望对大家学习Bootstrap排版相关知识有所帮助!

下载本文
显示全文