Bootstrap中的段落和強調內容
段落是排版中另外一個重要元素之一。在Bootstrap中爲文本設置了一個全局的文本樣式（這裏所說的文本是指正文文本）：css
一、全局文本字號爲14px(font-size)。html
二、行高爲1.42857143（line-height），大約是20px(你們看到一串的小數或許會有疑惑，其實他是經過LESS編譯器計算出來的，固然Sass也有這樣的功能)。前端
三、顏色爲深灰色（#333）；bootstrap
四、字體爲"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對咱們中文並不太合適，但在實際項目中，你們能夠根據本身的需求進行重置，在此咱們不作過多闡述，咱們回到這裏。該設置都定義在<body>元素上，因爲這幾個屬性都是繼承屬性，因此Web頁面中文本（包括段落p元素）如無重置都會具備這些樣式效果。瀏覽器
/*源碼請查看bootstrap.css文件中第274行~280行*/框架
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
另外在Bootstrap中，爲了讓段落p元素之間具備必定的間距，便於用戶閱讀文本，特地設置了p元素的margin值（默認狀況之下，p元素具備一個上下外邊距，而且保持一個行高的高度）：
/*源碼請查看bootstrap.css文件中第467行~469行*/less
p { margin: 0 0 10px; }
若是你對CSS預處理器有所瞭解，那麼你徹底能夠根據Bootstrap提供的預編譯版本LESS(或者Sass)進行自定義排版設置。在Bootstrap中，排版設置的默認值都存在variables.less文件中(Sass版本存在_variables.scss中)的兩個變量：工具
LESS版本：學習
@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14
Sass版本：字體
$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14
第一條語句用於設置字體大小，第二條語句用於設置行高。系統默認使用這兩個值產生整個頁面相應的margin、padding和line-height的值。換句話說，你只須要修改這兩個變量的值，而後從新編譯，就能夠自定義本身的Bootstrap排版樣式。（有興趣的同窗能夠嘗試一下，此處對於LESS或Sass版本運用不作過多闡述）。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>段落（正文文本）</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<p>Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合做開發,是一個CSS/HTML框架。</p>
<p>Seashen.cn是國內領先的HTML5學習社區！</p></body>
</html>
強調內容
在實際項目中，對於一些重要的文本，但願突出強調的部分都會作另外的樣式處理。Bootstrap一樣對這部分作了一些輕量級的處理。
若是想讓一個段落p突出顯示，能夠經過添加類名「.lead」實現，其做用就是增大文本字號，加粗文本，並且對行高和margin也作相應的處理。用法以下：
<p>我是普通文本，個人樣子長成這樣我是普通文本，個人樣子長成這樣我是普通文本，</p> <p class="lead">我是特地要突出的文本，個人樣子成這樣。我是特地要突出的文本，個人樣子長成這樣。</p>
效果查看最右側結果窗口。
「.lead」對應的樣式以下：
/*源碼查看bootstrap.css文件第470行~480行*/
.lead { margin-bottom: 20px; font-size: 16px; font-weight: 200; line-height: 1.4; } @media (min-width: 768px) {/*大中型瀏覽器字體稍大*/ .lead { font-size: 21px; } }
除此以外，Bootstrap還經過元素標籤:<small>、<strong>、<em>和<cite>給文本作突出樣式處理。
/*源碼查看bootstrap.css文件第55行~第58行*/
b,strong { font-weight: bold; /*文本加粗*/ }
/*源碼查看bootstrap.css文件第481行~第484行*/
small,.small { font-size: 85%; /*標準字體的85%,也就是14px * 0.85px，差很少12px*/ }
/*源碼查看bootstrap.css第485行~第487行*/
cite { font-style: normal; }
粗體
粗體就是給文本加粗，在普通的元素中咱們通常經過font-weight設置爲bold關鍵詞給文本加粗。在Bootstrap中，可使用<b>和<strong>標籤讓文本直接加粗。
/*源碼查看bootstrap.css文件第55行~第58行*/
b,strong { font-weight: bold; /*文本加粗*/ }
例如，下面的代碼使用<strong>標籤訂義了強調文本：
<p>我在學習<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的全部知識。</p>
斜體
在排版中，除了用加粗來強調突出的文本以外，還可使用斜體。斜體相似於加粗同樣，除了能夠給元素設置樣式font-style值爲italic實現以外，在Bootstrap中還能夠經過使用標籤<em>或<i>來實現。
例如，下面的代碼使用了<em>和<i>標籤訂義了強調文本：
<p>我在seashen.cn網上跟<em>大海</em>一塊兒學習<i>Bootstrap</i>的使用。我必定要學會<i>Bootstrap</i>。</p>
強調相關的類
在Bootstrap中除了使用標籤<strong>、<em>等說明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這裏稱其爲強調類名（相似前面說的「.lead」）,這些強調類都是經過顏色來表示強調，具本說明以下：
.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）
具本源碼查看bootstrap.css文件第500行~第532行：
.text-muted { color: #999; } .text-primary { color: #428bca; } a.text-primary:hover { color: #3071a9; } .text-success { color: #3c763d; } a.text-success:hover { color: #2b542c; } .text-info { color: #31708f; } a.text-info:hover { color: #245269; } .text-warning { color: #8a6d3b; } a.text-warning:hover { color: #66512c; } .text-danger { color: #a94442; } a.text-danger:hover { color: #843534; } <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>強調相關的類</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <div>.text-muted 效果</div> <div>.text-primary效果</div> <div>.text-success效果</div> <div>.text-info效果</div> <div>.text-warning效果</div> <div>.text-danger效果</div> </body> </html>
在排版中離不開文本的對齊方式。在CSS中經常使用text-align來實現文本的對齊風格的設置。其中主要有四種風格：
☑ 左對齊，取值left
☑ 居中對齊，取值center
☑ 右對齊，取值right
☑ 兩端對齊，取值justify
爲了簡化操做，方便使用，Bootstrap經過定義四個類名來控制文本的對齊風格：
☑ .text-left：左對齊
☑ .text-center：居中對齊
☑ .text-right：右對齊
☑ .text-justify：兩端對齊
具體源碼查看bootstrap.css文件第488行~第499行：
.text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; }
例以下面的四行代碼，分別定義文本的四種不一樣的對齊風格：
<p>我居左</p> <p>我居中</p> <p>我居右</p> <p>我兩端對齊</p>
- 1. bootstrap中的段落和強調內容
- 2. BootStrap中的標題和段落
- 3. Bootstrap-段落和文本
- 4. JavaScript強化教程——Bootstrap 包的內容
- 5. Bootstrap 排版（標題、段落、列表及其餘內聯元素）
- 6. bootstrap--標題，段落，列表，表格
- 7. BootStrap的相關內容
- 8. bootstrap要點內容
- 9. bootstrap-table 表頭和內容對不齊
- 10. Serif PagePlus X9增強的段落選項和文本樣式
- 更多相關文章...
- • Markdown 段落 - Markdown 教程
- • Eclipse 內容輔助 - Eclipse 教程
- • 三篇文章瞭解 TiDB 技術內幕 —— 談調度
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。