Bootstrap入门书籍之(一)排版(2)

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

水平定义列表 .dl-horizontal

现有代码如下:

<dl> <dt>标题一:</dt> <dd>描述内容,我很喜欢前端,也很喜欢响应式布局,它能在个不同大小的屏幕下提供很好的体验,我现在是初学者,但是我会越来强的</dd> <dt>标题二:标题二:标题二:标题二:</dt> <dd>描述内容</dd> </dl>

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

Bootstrap入门书籍之(一)排版

 

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

Bootstrap入门书籍之(一)排版

 

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

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

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

6. 代码

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

使用 <code></code> 来显示单行内联代码——针对于 单个单词或单个句子 的代码
使用 <pre></pre> 来显示多行块代码——针对于 多行代码 (也就是成块的代码)
使用 <kbd></kbd> 来显示用户输入代码——表示 用户要通过键盘输入的内容

直接来看效果吧!

Bootstrap入门书籍之(一)排版

 

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

code风格:

<div>Bootstrap的代码风格有三种:<code><code></code>、<code><pre></code>和<code><kbd></code></div>

pre风格:

<div> <pre> <ul> <li>...</li> </ul> </pre> </div>

kbd风格:

<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

<pre> 元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。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 之后,例如 <table>
响应式表格:其原理是在表格 外部添加容器 把普通表格 包裹 起来,下面进行详细说明:

<div><!-- 关键!容器包裹后实现响应式 --> <table><!-- 设置表格样式,带边框的表格 --> <thead><!-- 一个表格应该有表头,若直接写tr>td这样的结构,浏览器会自动创建一个tbody包裹 --> </thead> <tbody><!--与上同理,即使你不创建,浏览器也会自动添加tbody包裹你的代码 --> </tbody> </table> </div>

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

Bootstrap入门书籍之(一)排版

 

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

Bootstrap入门书籍之(一)排版


表格行的类,表格情景

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

Bootstrap入门书籍之(一)排版

 

只需要在 <tr> 标签添加上这些类就可以使用了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgypsf.html