初始化与CSS重置
Bootstrap致力于提供一个简洁、优雅的的基础,以此作为立足点。我们使用Reboot,把一系列元素特征的CSS修改放在一个文件里。
路线方针
系统重置建立新的规范化,只允许元素选择器向各个HTML元素提供了自有的风格,额外的样式只通过明确的.class
类来规范。例如,我们重置了一系列<table>
样式作为简单的基准,然后提供了.table
、 .table-bordered
等样式类,从而最小限定的定义、最大程序兼容、最多场景可被引用。
以下是是我们在重置CSS中选择覆盖和重定义哪些元素的指导方针和理由:
- 重置浏览器默认值,使用
rem
作为尺寸规格单位,代替em
用于指定可缩放的组件的间隔与缝隙。 - 最大化避免使用
margin-top
,防止使用它造成的垂直外排版(边距)混乱所造成之意想不到结果。更重要的是,一个单一方向的margin
是一个简单的构思模型。 - 为了易于跨设备缩放,
block
块元素必须使用rem
作为margin
的单位。 - 保持
font
相关属性最小的声明,尽可能地使用inherit
属性,不影响容器溢出。
页面默认值
为提供更好的页面展示效果,Bootstrap v4更新了 and <body>
元素的一些属性,其中包括:
- 全局性地将每一个元素的
box-sizing
属性(包括*:before
、*:after
都设置为border-box
-以确保DIV元素自身定义的宽度不会因为border或padding而超过。 <html>
根元素没有声明font-size
属性,但被假定为16px
大小(这是目前Chrome等浏览器默认值),然后在此基础上采用font-size:1rem
的比例应用于<body>
上,使媒体查询能够轻松的实现缩放,最大程序保障用户偏好和易于访问。<body>
元素被赋予一个全局性的font-family
和line-height
,其下面的诸多表单元素也继承此属性,以防止字体大小错位冲突。- 为了安全起见,
<body>
的background-color
的默认值赋为#fff
。
本地字体属性
Bootstrap 4删除了默认的Web字体(Helvetica Neue,Helvetica和Arial),并替换为“本地OS字体引用机制”,以便在每个设备和操作系统上实现最佳文本呈现,参阅关于本地字体引用文章了解更多 。
$font-family-sans-serif:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
这样font-family
适用于<body>
,并被全局并自动继承。切换全局font-family
,只要更新$font-family-base
和重新编译Bootstrap即可。
标题和段落
所有标题和段落元素(如说<h1>
以及<p>
都被重置,系统移除它们的上外边距margin-top
定义,标题添加外边距为margin-bottom: .5rem
,段落元素<p>
添加了外边距margin-bottom:1rem
以形成简洁行距。
Heading | Example |
---|---|
| h1. Bootstrap heading |
| h2. Bootstrap heading |
| h3. Bootstrap heading |
| h4. Bootstrap heading |
| h5. Bootstrap heading |
| h6. Bootstrap heading |
列表
移除所有的列表元素(<ul>
、<ol>
、 and <dl>
)的外边距margin-top
,并设置为margin-bottom: 1rem
,被嵌套的子列表没margin-bottom
值。
为了得到更简单的样式、清晰的等级以及更好的间距,描述列表code class=”highlighter-rouge”>
margin
属性定义;其margin-left
被重置为0、并添加margin-bottom: .5rem
值;另一方面<dt>
的字体是粗体。
pre
预先格式化文本
pre
标签可定义预格式化的文本。被包围在pre
>标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
bootstrap重置了pre
元素,移除了它的margin-top
属性并用rem
作为margin-bottom
的单位。
表格
微调了表格的样式,样式化了<caption>
,且确保text-align
属性一致。与跟边框、内填充有关的细节,将在.table
表格一章门讲解。
Forms表单
Bootstrap重量置了多种表单元素,得到简化的基本样式,使之简洁易用,显著变化表现在:
<fieldset>
去除了边框、内填充、外边距属性,所以它们可以轻松地用作单一的输入框或者输入框组的放入容器中使用。<legend>
和fieldset字段集一样,也已被重新设计过,显示为不同种类的标题。<label>
加上了display: inline-block
属性,从而可以被用户赋予margin
属性进行布局调用。<input>
、<select>
、<textarea>
s、<button>
基本本来都被规范化处理了,同时重置移除了它们的margin
,并且设置了inline-height: inherit
属性。<textarea>
被修改为只能竖直方向上调整大小,因为水平方向上调整大小经常会“破坏”页面布局。
可以从下面方示例控件品味细节:
其它杂项
Address地址控件
BootStrap更新了<address>
元素初始属性,重置了浏览器默认的font-style
,由italic
改为normal
、line-height同样是继承来的,并添加了margin-bottom: 1rem
。<address>
是为最靠近根元素(或整个正文)提供联系信息。用
结束行可保持格式。
Blockquote引用块效果
blockquote
引用块默认的margin是1em 40px,而BootStrap把它重置为0 0 1rem,使其与其它元素更一致,下方示例:
addr内联元素
<abbr>
内联元素接受基本的样式,使其在段落文本中突出。
概要
cursor
摘要上的默认值是 text
,所以我们重置,以 pointer
通过单击它来传达该元素可以进行交互。
HTML5 的[hidden]
属性
HTML5标准中增加了一个 全新的 [hidden]标签
, 它的默认值被赋予为 display: none
,借鉴PureCSS的思路,我们将它重定义为[hidden] { display: none !important; }
,以防止它的 display
值被意外覆盖,即使IE10不支持 [hidden]
属性,但通过引用BootStrap的引入明确解决了此问题。
<input type="text" hidden>
jQuery冲突
[hidden]
与jQuery的两个方法不兼容,分别是:$(...).hide()
、$(...).show()
,目前还没有特别好的[hidden]
其他管理display
元素的技术。
仅仅切换元素的可见性,这意味着其display
不被修改和元素还会影响文档的流程,使用 .invisible
类来代替。