bootstrap内容部分API解读（1）
生活随笔
收集整理的這篇文章主要介紹了
bootstrap内容部分API解读（1）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
1.重置
（1）概念
（2）理由及方式
（3）重置內容
2.排版
（1）標題
（2）引言
（3）內聯文本
（4）縮寫
（5）引用和署名
（6）對齊
（7）無特效列表
1.重置
（1）概念
針對HTML的特定元素重置樣式，以便于Bootstrap能在各種瀏覽器下表現一致。
（2）理由及方式
- 重置瀏覽器默認值，使用rem作為尺寸規格單位，代替em用于指定可縮放的組件的間隔與縫隙
- 最大化避免使用margin-top，防止使用它造成的垂直外排版（邊距）混亂所造成的意想不到效果。更重要的是，一個單一方向的，margin是一個簡單的構思模型。
- 為了易于跨設備縮放，塊級元素必須使用rem作為margin的單位
- 保持font相關屬性最小的聲明，盡可能地使用inherit（可繼承）屬性，不影響容器溢出。
（3）重置內容
I.頁面默認值
- 全局性地將每一個元素（包括::after,::before）的box-sizing屬性設置為border-box，以確保元素自定義的寬度不會因為border或者padding超出聲明的寬度；
- <html>上沒有聲明基本字體大小，但假定為16px（瀏覽器默認值）. font-size應用于<body>,以便通過媒體查詢輕松響應類型擴展，同時尊重用戶偏好并確保更易于訪問的方法
- <body>元素被賦予了一個全局性的font-size和line-height，其下面的諸多表單元素也繼承此屬性，以防止字體大小錯位沖突
- <body>的background-color的默認值為#fff
II.本地字體屬性
III.標題和段落
所有的標題和段落元素都被重置，系統移除它們的margin-top，標題添加了margin-bottom: .5rem，段落添加了margin-bottom: 1rem.
IV.列表
- 刪除<ul>,<ol>,<dl>中的margin-top，設置為margin-bottom: 1rem，嵌套列表沒有margin-bottom
- <dd>的margin-top重置為0，添加margin-bottom: .5rem
- <dt>是粗體
V.表格
VI.form表單
- <fieldset>沒有邊框,填充或外邊距屬性,所以它們可以輕松地作用單一的輸入框或者輸入框組的放入容器中使用
- <lengend>和<fieldset>字段集一樣,也被重新設計過,顯示為不同種類的標題
- <label>加上了display: inline-block屬性,從而可以被用戶賦予margin屬性進行布局調用
- <input>,<select>,<textarea>,<button>重置刪除了它們的margin,并且設置了inline-height: inherit
- <textarea>被修改為只能豎直方向上調整大小,因為水平方向上調整大小經常會"破壞"頁面布局
IV.pre預先格式化文本
<pre>標簽可定義預格式化文本,被包圍在<pre>標簽元素中的文本通常會保留空格和換行符，而文本也會呈現為等寬字體。bootstrap重置了<pre>元素,移除了它的margin-top屬性并用rem作為margin-bottom的單位
2.排版
（1）標題
- 兼容所有HTML標題集,包括從<h1>到<h6>的六種標題展現，類名h1-h6
?
<div class="caption mr-3"><h1>這是一個一級標題</h1><h2>這是一個二級標題</h2><h3>這是一個三級標題</h3><h4>這是一個四級標題</h4><h5>這是一個五級標題</h5><h6>這是一個六級標題</h6> </div> <p class="h1">這是一個段落標簽+h1類名的標題</p> <p class="h2">這是一個段落標簽+h2類名的標題</p> <p class="h3">這是一個段落標簽+h3類名的標題</p> <p class="h4">這是一個段落標簽+h4類名的標題</p> <p class="h5">這是一個段落標簽+h5類名的標題</p> <p class="h6">這是一個段落標簽+h6類名的標題</p>- 定制標題樣式，標簽<small>
- 超大標題，類名display-1/2/3/4
（2）引言
一般代表段落里面特殊處理文本,類名lead
<div class="h4">引言</div> <div class="lead">市場是一個不斷演化并進行適應性調整的體系，正如達爾文進化論所說，適者生存，面對經濟復雜性的指數級增長，要想在殘酷的商業競爭中獲取成功，《財富的起源》為你審視經濟、掌控財富提供了全新的視角與方法。 </div>（3）內聯文本
讓內聯文本里文本屬性變換
<div class="mt-5"><p>You can use the mark tag to <mark>highlight</mark> text.</p><p><span class="mark">You can use .mark</span>instead of mark</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><small>This line of text is meant to be treated as fine print.</small></p><p class="small">You can use .small instead of small</p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p> </div>（4）縮寫
讓鼠標移入縮寫文本里面顯示全稱
<p><abbr title="attrbitue">attr</abbr></p><p><abbr title="HypperText Markup Language" class="initialism">HTML</abbr></p>（5）引用和署名
用于引用文檔中其他來源的內容塊。將任何HTML包含在<blockquote class="blockquote">里作為引用，在?<footer class="blockquote-footer">?里添加需要署名的內容。 并在?<cite>?里添加作者。
<blockquote class="blockquote"><p>你知道嗎，人在難過的時候就會愛上日落</p><footer class="blockquote-footer">來自<cite>《小王子》</cite></footer> </blockquote>（6）對齊
<p class="text-left">星星那么亮，是不是為了讓每個人終有一天能回到自己的星球？</p> <p class="text-center">星星那么亮，是不是為了讓每個人終有一天能回到自己的星球？</p> <p class="text-right">星星那么亮，是不是為了讓每個人終有一天能回到自己的星球？</p>（7）無特效列表
在ul（ol）上使用.list-unstyled可以刪除列表項目上默認的list-style以及左外邊距（只針對直接子元素），這只生效于在直接子列表項目上，不影響嵌套的子列表
<div class="list-unstyled"><li>《財富的起源》</li><li><ul class="list-unstyled"><li>《三體》</li></ul></li> </div>?（8）行內列表
刪除列表的項目符號并使用兩個類的組合應用一些微小的邊距，使用?.list-inline和.list-inline-item?來實現。
<div class="list-inline"><li class="list-inline-item">《三體》</li><li class="list-inline-item">《小王子》</li><li class="list-inline-item">《財富的起源》</li> </div>?（9）超出內容省略
<div class="contianer-fluid"><dl class="row"><dt class="col-sm-3">《小王子》</dt><dd class="col-sm-9">看東西只有用心才看得清楚。重要的東西眼睛是看不見的</dd><dt class="col-sm-3">《人間失格》</dt><dd class="col-sm-9">懦夫連幸福降臨都害怕，觸到棉花都受傷，當然也會為幸福所傷</dd><!-- text-truncate 讓超出內容省略 --><dt class="col-sm-3 text-truncate">《我們仨》《我們仨》《我們仨》《我們仨》《我們仨》《我們仨》《我們仨》《我們仨》</dt><dd class="col-sm-9">他的雙眼皮很美</dd></dl> </div>?
總結
以上是生活随笔為你收集整理的bootstrap内容部分API解读（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深入理解事件循环机制
- 下一篇： bootstrap内容部分API解读（2