Bootstrap页面内容——初始化

最新推荐文章于 2023-03-29 14:26:10 发布

飞羽逐星

最新推荐文章于 2023-03-29 14:26:10 发布

阅读量1.7k

点赞数 1

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/xun__xing/article/details/107616284

版权

Bootstrap 专栏收录该内容

22 篇文章 6 订阅

订阅专栏

页面内容

一、初始化与CSS重置（Reboot）

一、初始化与CSS重置（Reboot）

1.路线方针

系统重置建立新的规范化，只允许元素选择器向各个HTML元素提供了自有的风格，额外的样式只通过明确的.class类来规范。例如，我们重置了一系列<table>样式作为简单的基准，然后提供了.table、 .table-bordered等样式类，从而最小限定的定义、最大程序兼容、最多场景可被引用。

重置浏览器默认值，使用rem作为尺寸规格单位，代替em用于指定可缩放的组件的间隔与缝隙。
最大化避免使用margin-top,防止使用它造成的垂直外排版（边距）混乱所造成之意想不到结果。更重要的是，一个单一方向的margin是一个简单的构思模型。
为了易于跨设备缩放，block块元素必须使用rem作为margin的单位。
保持font相关属性最小的声明，尽可能地使用inherit属性，不影响容器溢出。

2.页面默认值

为提供更好的页面展示效果，Bootstrap v4更新了 and 元素的一些属性，其中包括

全局性地将每一个元素的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。

3.本地字体属性

Bootstrap 4删除了默认的Web字体（Helvetica Neue，Helvetica和Arial），并替换为“本地OS字体引用机制”，以便在每个设备和操作系统上实现最佳文本呈现，参阅关于本地字体引用文章了解更多。
这样font-family适用于<body>，并被全局并自动继承。切换全局font-family，只要更新$font-family-base和重新编译Bootstrap即可。

4.标题和段落

所有标题和段落元素(如说<h1>以及<p>都被重置，系统移除它们的上外边距margin-top定义，标题添加外边距为margin-bottom: .5rem，段落元素<p>添加了外边距margin-bottom:1rem以形成简洁行距。

5.列表

移除所有的列表元素(<ul>、<ol>、 and <dl>）的外边距margin-top，并设置为margin-bottom: 1rem，被嵌套的子列表没margin-bottom值。
为了得到更简单的样式、清晰的等级以及更好的间距，描述列表code class=“highlighter-rouge”><dd>有一个更优级别的margin属性定义；其margin-left被重置为0、并添加margin-bottom: .5rem值；另一方面<dt>的字体是粗体。

6.pre预先格式化文本

pre标签可定义预格式化的文本。被包围在pre>标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
bootstrap重置了pre元素，移除了它的margin-top属性并用rem作为margin-bottom的单位。

	<pre>
		&lt;html&gt;
		&lt;head&gt;
	</pre>

在这里插入图片描述

7.表格

微调了表格的样式，样式化了<caption>，且确保text-align属性一致。与跟边框、内填充有关的细节，将在.table表格一章门讲解。
<caption> 标签定义表格的标题，<caption> 标签必须直接放置到 <table> 标签之后。

8.Forms表单

<fieldset>去除了边框、内填充、外边距属性，所以它们可以轻松地用作单一的输入框或者输入框组的放入容器中使用。
<legend>和fieldset字段集一样，也已被重新设计过，显示为不同种类的标题。

  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>

在这里插入图片描述

<label>加上了 display: inline-block属性，从而可以被用户赋予 margin 属性进行布局调用。
<input>、 <select>、 <textarea>、 <button>基本本来都被规范化处理了，同时重置移除了它们的margin，并且设置了inline-height: inherit属性。
<textarea>被修改为只能竖直方向上调整大小，因为水平方向上调整大小经常会“破坏”页面布局。

	<label for="ipt">用户名：</label>
	<input type="text" id="ipt">

在这里插入图片描述

<textarea name="" id="" cols="30" rows="10"></textarea>

在这里插入图片描述

9.addr内联元素

<abbr> 内联元素接受基本的样式，使其在段落文本中突出。
<abbr> 标签指示简称或缩写

<abbr title="attrbitue">attr</abbr>

在这里插入图片描述

10.概要

<summary> 标签包含 details 元素的标题，“details” 元素用于描述有关文档或文档片段的详细信息
cursor 摘要上的默认值是 text，所以我们重置，以 pointer 通过单击它来传达该元素可以进行交互

<details>
	<summary>HTML 5</summary>
	This document teaches you everything you have to learn about HTML 5.
</details>

在这里插入图片描述

11.HTML5 的[hidden] 属性

HTML5标准中增加了一个全新的 [hidden]标签, 它的默认值被赋予为 display: none，借鉴PureCSS的思路，我们将它重定义为[hidden] { display: none !important; },以防止它的 display 值被意外覆盖，即使IE10不支持 [hidden] 属性，但通过引用BootStrap的引入明确解决了此问题

<input type="text" hidden>

飞羽逐星

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Bootstrap页面内容——初始化

页面内容一、初始化与CSS重置（Reboot）1.路线方针2.页面默认值3.本地字体属性4.标题和段落5.列表6.pre预先格式化文本7.表格8.Forms表单9.addr内联元素10.概要11.HTML5 的[hidden] 属性一、初始化与CSS重置（Reboot）1.路线方针系统重置建立新的规范化，只允许元素选择器向各个HTML元素提供了自有的风格，额外的样式只通过明确的.class类来规范。例如，我们重置了一系列<table>样式作为简单的基准，然后提供了.table、 .tabl
复制链接

扫一扫