Bootstrap(三)文本排版

時間 2019-11-20

原文原文鏈接

排版前的基礎

必須是HTML5文檔類型

<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
  </head>
  <body></body>
</html>

移動設備優先(viewport的設置)

<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=no">
user-scalable=no，能夠禁用縮放，在移動設備瀏覽器中，不縮放要用滾動條來幫助查看
viewport 語法介紹：
01 <!-- html document -->
02 <meta name="viewport"
03    content="
04        height = [pixel_value | device-height] ,
05        width = [pixel_value | device-width ] ,
06        initial-scale = float_value ,
07        minimum-scale = float_value ,
08        maximum-scale = float_value ,
09        user-scalable = [yes | no] ,
10        target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
11    "
12 />

響應式圖片

在Bootstrap 3.x中增長了一個 .img-reponsive 樣式，其實就是爲圖片設置 max-width:100%;height;auto; 在圖片上加此樣式，能夠按比例縮放，但不超過父元素尺寸html

排版與連接

bootstrap設置了一些全局樣式:body背景爲白，margin:0;
字體、大小、行間距都進行了設置
全部默認樣式都在normalize.less和scaffolding.less

標題

h1-h6
.h1-.h6
<small>小字體</small>

頁面主題

body全局樣式

Bootstrap爲全局設置字體爲14px, 行間距爲字體的1.428倍（20px）
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

p標籤樣式

// 全局樣式
p {
  margin: 0 0 10px;
}

// lead樣式用於給文本進行強調
.lead {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

文本對齊

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

強調文本標籤

small

strong

b

em

cite

縮略語

當鼠標懸停在縮寫和縮寫詞上時就會顯示完整內容bootstrap

基本縮略語

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

首字母縮略語

<abbr title="HyperText Markup Language" class="initialism">html</abbr>

地址元素

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

引用樣式

在你的文檔中引用其餘來源的內容瀏覽器

默認樣式的引用

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

多種引用樣式

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

讓引用呈現內容右對齊

<blockquote class="blockquote-reverse">
  ...
</blockquote>

1. Bootstrap文字排版
2. Bootstrap 排版正文
3. bootstrap之文字排版
4. 響應式開發(六)-----Bootstrap CSS----------Bootstrap文本排版
5. Bootstrap 3 排版
6. Bootstrap 排版
7. Bootstrap之排版
8. Bootstrap學習之三：使用排版
9. Bootstrap<基礎三> 排版
10. Bootstrap CSS -2 排版
更多相關文章...
• MySQL的版本以及版本號 - MySQL教程
• SVN 版本回退 - SVN 教程
• 算法總結-歸併排序
• 三篇文章瞭解 TiDB 技術內幕——說存儲

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。