Bootstrap深入理解(四)

480 阅读8分钟

这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战

Bootstrap中CSS布局

1, 前言

Bootstrap的三大核心之一CSS布局,也是CSS的基础知识,包括基础排版(Typography)、代码(Code)、表格(Tables)、表单(Forms)、按钮(Buttons)、图片(Images)、辅助类(Helper Classes)和响应式设计(Responsive utilities)。这些基础的布局语法都是通过CSS最基础、最简单的组合来实现的,通过这些基础而又核心的布局语法可以快速上手。

2,基础排版

​ HTML页面基础排版(Typography)方面所需要的各种技能,比如head标题(h1至h6)、地址、列表、文本 块等

1, 标题

​ Bootstrap为传统的标题元素h1~h6重新定义了标准的样式,使得在所有浏览器下显示效果都一样

1637417514406.png

2,页面主题

​ 默认情况下,Bootstrap为全局设置的字体大小font-size为14像素,间距line-height为字体大小的1.428倍(即20像素)。该设置应用于元素和所有的段落上

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

注意:

元素内的段落会有一个额外的margin-bottom,大小是行间距的一半(默认为10px)

Bootstrap的排版设置默认值存储在variables.less文件里的两个LESS变量里:@font-size-base@line-height-base。第一个用于设置字体大小,第二个用于设置行间距。系统默认使用这两个值产生整个页面相应的marginpaddingline-height。通过修改这两个值后,再重新编译,从而制定自己的Bootstrap版本

3, 强调文本

​ Bootstrap将默认的文本强调元素进行了轻量级实现,这些元素分别为:small、strong、em、cite。

b,strong { font-weight: bold; /* 粗体 */}
// 源码478行
small,.small { font-size: 85%; /* 标准字体的85% */}
cite { font-style: normal; /* 正常字体*/}

4, 缩略语

​ Bootstrap在abbr元素上实现了缩略词的功能,即鼠标移动到缩略词上时,就显示声明在title里的属性值。效果为:缩略词下面有虚横线,鼠标移动到缩略词上时有手形图标

abbr[title],
abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #999999;
}
.initialism {
	font-size: 90%; text-transform: uppercase;
}

3, 列表

Bootstrap提供了6种形式的列表,分别是:普通列表、有序列表、去点列表、内联列表、描述列表和水平描述列表。

1.普通列表

​ 普通列表的使用方式和人们平时用的一样,Bootstrap只是在此基础上做了一些细微的优化

2.有序列表

使用了ol元素的有序列表,也是做了一些微调,看起来比原来的默认显示柔和了一些

3.去点列表

​ Bootstrap提供了一个去除默认列表样式的风格,即去除普通列表项前面的圆点

4.内联列表

​ Bootstrap定义了一个list-inline样式用于实现内联列表,也就是将列表项水平显示

5.定义列表

​ Bootstrap对默认的dl定义列表也做了一些轻微的调整,主要是调整行间距和字体加粗

6.水平定义列表

​ Bootstrap提供了一个dl-horizontal样式,通过在dl元素上应用该class,实现了列表水平显示的效果

4, 代码

源码文件:code.less

主要是介绍代码显示的问题。Bootstrap对代码显示提供了以下3种方式

* 使用<code>元素显示单行内联代码
* 使用<kbd>元素显示用户输入代码
* 使用<pre>元素新生多行代码块

1,内联代码

单行的内联代码需要使用code元素包含

​ 内联代码效果主要是设置code元素的背景颜色和其内部的文字颜色而已

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e; /* 文字颜色为深红*/
    white-space: nowrap;
    background-color: #f9f2f4; /* 背景颜色为浅红*/
    border-radius: 4px; /* 设置圆角*/
}

2, 用户输入代码

元素包含的内容是表示该内容需要用户键盘输入,所以一般是设置成input的效果,用法和code类似

kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff; /* 文字颜色为白色*/
    background-color: #333; /* 背景颜色为深黑色*/
    border-radius: 3px; /* 设置圆角*/
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); /* 设置阴影*/
}

3, 多行代码块

pre元素一般用于显示大块的代码段,并保证原有格式不变。另外可以在pre元素上应用.pre-scrollable样式,则可以控制该区域最大高度为340像素,并可以在y方向滚动

pre {
    display: block;
    /* 省略部分代码*/
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5; /* 背景颜色为浅灰色
    */
    border: 1px solid #ccc; /* 边框为深灰色*/
    border-radius: 4px;
    }
    .pre-scrollable {
    max-height: 340px; /* 固定高度*/
    overflow-y: scroll; /* 竖向可滚动*/
}

5, 表格

源码文件:table.less

在表格组件里,Bootstrap提供了1种基础.table样式、4种附加样式(.table-striped、.table-bordered、.table-hover、.table-condensed)以及一个支持响应式布局的.table-responsive容器样式。

1, 基础样式

​ 只需要在table元素上应用.table样式即可制作出比较漂亮的表格。

2, 带背景条纹的表格

​ 背景条纹表格,就是在现有.table样式的基础上再应用一个.table-striped样式,其添加了隔行加背景色的设置。

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

3, 带边框的表格

​ Bootstrap为表格所有的单元格提供了1条1像素宽的边框

4, 鼠标悬停高亮的表格

​ 在表格中的记录上,当鼠标移动上去时对应的部分能够换个颜色的话,那就会显得很有动感,并且有高亮显示的功能。

5, 紧凑型表格

​ 所谓紧凑型表格,即表格的显示比普通表格稍微紧凑一些,实现原理是减少单元格的内边距。

6, 行级元素样式

Bootstrap为表格的tr元素提供了5种额外的样式,用于控制tr的背景颜色

1637418513317.png

7, 响应式表格

​ 随着响应式设计的大量需求,Bootstrap为表格也提供了一个响应式设计的容器(.table-responsive样式),将.table-responsive样式包装在.table样式外部即可创建响应式表格,其会在小屏幕设备上(小于768像素)水平滚动。而当屏幕大于768像素宽度时,水平滚动条消失。

6, 表单

源码文件:form.less

表单(Form)是HTML网页交互中最重要的部分,同时也是Bootstrap框架中的核心内容,表单提供了丰富的样式(基础、内联、横向)。结合各种各样的表单控件,利用各种表单控件不同的状态、大小、分组,可以组合出绚丽多彩的表单

1, 基础表单

​ Bootstrap对基础表单未做太多的定制化效果设计,默认都使用全局设置,只是对表单内的fieldset、legend、label标签进行了设定,将这些元素的margin、padding、border等进行了细化设置。

2, 内联表单

​ 有的时候,我们可能需要一个所有控件都在一行中的表单,比如图3-21所示的登录。要实现这种内联样式效果,只需要在普通的form元素上应用一个.form-inline样式,即可将表单内的元素设置为内联样式。

3, 横向表单

​ 横向表单与内联表单的使用方式不太一样,其不能在form元素上简单应用一个.form-horizontal样式,这是因为.form-horizontal样式本身没有做什么特殊的设置,只简单设置了一下相关的padding和margin值。

7, 表单控件

在默认的Bootstrap源码里,对input、select、testarea都有良好的支持,尤其是对现有HTML5语法下的input都进行了支持(如type为text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color的元素)

1.input元素

在使用input元素的时候,必须声明type类型,否则可能会引起其他问题,因为Bootstrap在定义这些样式的时候都指定了type类型,比如,input[type="text"]。

<input type="text" placeholder=“文本输入框”>

2.select元素

下拉列表select元素的使用方式和原始的一致,多行选择设置mulitiple属性为multiple即可。Bootstrap会为这些默认的元素提供统一风格的显示。

<select>
    <option>1</option>
    </select>
    <select multiple="multiple">
    <option>1</option>
    <option>2</option>
</select>

3.textarea元素

​ 在textarea元素里定义了rows数字即可定义大文本框的高度,定义cols可以定义大文本框的宽度。但是如果在该框架上应用了.form-control样式,则cols属性不起作用,因为.form-control样式的表单控件都设置了100%的宽度(或auto)。所以大家在使用时,一旦设置了该样式,就不需要再设置cols属性了

<textarea class="form-control" rows="3"></textarea>

4.checkbox和radio

​ checkbox和radio是input元素里两个非常特殊的type,通常在使用的过程中和label文字搭配,但通常会出现左右边距对不齐的问题。