《深入理解bootstrap》閱讀筆記：第三章 CSS版面

一. 概述一下理念

bootstrap基於H5開發。提倡移動先行（媒詢聲明是必須的），對瀏覽器支援面不是很廣。

響應式圖片：max-width:100% height:auto;

可以加上：.img-responsive類別

排版方面的基本樣式為：

body的margin為0，背景色為白色，行間距為20/14倍

使用Normalize.css庫，使各個瀏覽器差異最小化

居中容器container有一個最大範圍。 （最大左右margin為auto，和設備有關）

 

二. 文字基礎排版（全域設定）

1.標題（h標記和small標記）

1

2

3

4

5

6

<code class="html keyword">h1>header1<code class="html keyword">small>small標記的副標題small> <code class="html plain">h2

>header2small>small標記的副標題small> <code class="html keyword">h3>header3<code class="html keyword">small>small標記的副標題

small

> <code class="html keyword"&gt;h4&gt;header4small&gt;small標記的副標題small&gt;

h5&gt;header5small&gt;small標記的副標題small&gt; <code class="html keyword"&gt;h6&gt;header6small

&gt;small標記的副標題small&gt; <code class="html keyword"&gt;

所有標題元素裡的內容的字體顏色都是灰色（#999999），行間距都為1。

內的文字字體在h​​1、h2、h3內是當前元素所對應字體大小的65%；而在h4、h5、h6下則是75%。

 

A. 字體大小為14px，間距為20px。 p元素的margin-bottom為行間距一半（10px）。

B. 突出顯示

當你有一段文字，想高亮顯示，又不想獲得和h標記一樣的權重時，可以class="lead"

 

&gt;

1	<code class="html keyword">span classspan class="lead">email me span

如圖.lead和h1的比較效果：

2. 強調文本強調元素表現小號文字strong著重（加粗）em斜體cite引用來源，字體大小為85%

small	（可以直接套用.small類別）

🎜 🎜 🎜

 

3. 縮寫abbr和.initialism

兩者都可以實現下劃虛線懸停手型效果 需要搭配title屬性使用。

4. 地址address

用來包裹和聯絡資訊有關的資訊。樣式差異是間距和底部樣式稍微有點不同。

1

2

3

4

5

6

7

8

9

10

<code class="html keyword">address>

    <code class="html keyword">strong>Twitter, Inc.&lt;code class="html keyword"&gt;strong>br     

795 Folsom Ave, Suite 600br>     

San Francisco, CA 94107br>     abbr title="Phone">P: address&gt;

address&gt;

    strong&gt;湯姆叔叔

strong&gt;br     a href=

"mailto:#"&gt;tomxu address&gt; <code class="html keyword"&gt;

效果如圖

5. 引用blockquote

引用的一般格式是

1 2 3 4

<blockquote></blockquote>     <p>愛情不是想買想買就能買</p>     <small>出自<cite>愛情買賣</cite></small>

當然，small換成footer也是一樣的效果。

預設是左對齊的，想要右對齊可以對blockquote使用.pull-right類別。整體飄到了右邊。

6. 列表

（1）ul-li無序列表

bootstrap下，普通列表的ul-li框架和預設基本上是一樣的。

A. ul-li列表的樣式是由list-style決定的。在bootstrap框架使用.list-unstyle類別。原始碼樣式無非是padding-left:0;list-style:none。

注意：如果是列表嵌套列表，對祖父級的ul應用.list-unstyle類，孫代li是不會繼承的。

B. 內聯列表：正常的ul-li是豎著顯示的。在很多場合，最典型的就是導航，需要把li打橫排列。這時可以使用內聯列表的.list-inline類

 

li&gt;

1 2 3 4 5

<code class="html keyword">ul class="list-inline">             <code class="html keyword">li>home<code class="html keyword">li>>home li>             <code class="html keyword">li>article li >>articleli>>article<code class="html keyword">li              li>aboutli> >about

🎜🎜        🎜🎜🎜🎜ul🎜🎜&gt;🎜🎜 🎜 🎜 🎜 🎜 🎜

（2）有序列表ol-li

更換了字體，顯示更加柔和

（3）dl-dt-dd定義列表

定義列表包括了描述訊息，bootstrap下的dl-dt-dd定義列表通常也是縱向排列的。

1 2 3 4 5 6 7 8

<code class="html keyword">dl>     <code class="html keyword">dt>標題1<code class="html keyword">dt>     <code class="html keyword">dd>描述1<code class="html keyword">dd>     <code class="html keyword">dt>標題2<code class="html keyword">dt>     <code class="html keyword">dd>描述2<code class="html keyword">dd>     <code class="html keyword">dt>標題3<code class="html keyword">dt>     <code class="html keyword">dd>描述3<code class="html keyword">dd> <code class="html keyword">dl>

我想在横向展示一个商品列表，包括描述信息。如果给dl加上class="dl-horizontal"

 

7. 代码

包括code单行代码，kbd用户输入代码和pre多行代码块。

代码样式的用法示例如下：

1 2 3

&lt;code&gt;&lt;body&gt;&lt;/body&gt;&lt;/code&gt;&lt;br&gt; &lt;kbd&gt;&lt;body&gt;&lt;/body&gt;&lt;/kbd&gt; &lt;<code class="html keyword"&gt;pre&gt;&lt;body&gt;&lt;/body&gt;&lt;/<code class="html keyword"&gt;pre&gt;

（1）code

code内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色

（2）kbd

kbd表示需要用户输入，可以配合input元素使用。

1	请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码

（3）多行代码块pre

pre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。

粘贴进去会有空格。

类似还有&lt;samp&gt;可以格式化代码。用较为标准的字体和行间距显示

8.其它H5标记补充

（1）&lt;mark&gt;,也可以使用.mark

 

1	&lt;<code class="html keyword"&gt;p class="mark"&gt;this is mark text&lt;/<code class="html keyword"&gt;p&gt;

（2）del標記和s標記

1	<code class="html keyword"&gt;del&gt;I am delated.<code class="html keyword"&gt;del&gt;

（3）ins標記和u標記

下劃線，ins定義已經被插入文件中的文字。 u標記語義和ins不同，如果文字不是超鏈接，就不要對其使用u標記

（4）對齊相關

——text-left

——text-center

——text-right

文本居左中右。

——text-justify：自己判斷——齊行定義單字間的間隔對齊，跟避頭尾法則類似。注意css3中也有對應的屬性。

——text-nowrap：瀏覽器縮小時始終保持1行

（5）大小寫相關：

text-lowercase小寫

text-uppercase大寫

text-capitalize首字母大小

【例3.1】文字排版練習

1 2 3 4 5 6 7 8

<code class="html keyword"&gt;div class="text-justify"&gt;         &lt;code class="html keyword"&gt;h3 class="text-center"h small&gt;h3 &gt;         p class= "text-capitalize" 標題🜎= or that"text-capitalize" 標題🜎 that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows.p&gt;         <code class="html plain"&gt;p &gt;This is why I am afraid, you say that u me too.         <code class="html keyword"&gt;ins&gt;em&gt;譯         <code class="html keyword"&gt;p&gt;你說煙雨微芒，蘭亭遠望；後來輕攬中，深遮婆娑。你說春光爛漫，綠袖紅香；後來內掩西樓，靜立卿旁。你說軟風輕拂，醉臥思量；後來緊緊掩門窗，漫帳成殤。 <code class="html keyword"&gt;p&gt;         <code class="html keyword"&gt;p&gt;你說情絲柔腸，如何相忘；我卻眼波微轉，兀自成霜。 <code class="html keyword"&gt;p&gt; <code class="html keyword"&gt;div&gt;

 

三. 表格相關css

表格實作是給table加上.table類

【例3.2】做一個5行5列的表格，記錄資料

 

                

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<code class="html keyword"&gt;table&gt;                     <code class="html keyword"&gt;thead&gt;thead&gt;thead&gt;                        <code class="html keyword"&gt;td&gt;                         <code class="html keyword"&gt;td&gt;                         td &gt;作者？                         <code class="html keyword"&gt;td&gt;配                         td &gt;                     <code class="html keyword"&gt;tr&gt;tr                                           身體&gt; 身體&gt;身體&gt;身體 &gt; 身體&gt;身體&gt; 體                         tr &gt;tr&gt;tr                              <code class="html plain"&gt;                             <code class="html keyword"&gt;                            <div class="line number15 index14 alt2" style="height: 16px;"&gt; <code class="html spaces"&gt;                             <code class="html keyword"&gt;                             <code class="html keyword"&gt;                         tr                         <code class="html plain"&gt;tr&gt; tr &gt;<code class="html keyword"&gt;tr                                                           <code class="html keyword"&gt;                                                                                                               <code class="html plain"&gt;tr                         tr&gt;tr&gt; tr<div class="line number26 index25 alt1" style="height: 16px;"&gt; <code class="html spaces"&gt;                            <code class="html keyword"&gt;                             <code class="html keyword"&gt;                                                                                                                tr                         tr&gt;tr &gt;tr <code class="html plain"&gt;                            <code class="html plain"&gt;                                                       可能                              <code class="html keyword"&gt;                             <code class="html keyword"&gt;                         tr                     身體&gt; 身體 &gt;身體&gt; 身體&gt;身體 &gt; 身體&gt; 體

🎜桌子🎜🎜&gt;🎜🎜🎜🎜桌子🎜🎜&gt;🎜🎜 🎜 🎜 🎜 🎜 🎜

 

無任何class樣式時顯示：

1.table基礎樣式

（1） 為table標籤加上cla​​ss="table"，效果就變成：

 秒變高富帥了有木有？

（2）隔行變色.table-striped

table-striped：斑馬線

使用CSS3的:nth-child實現。

（3）加上邊框

使用.table-bordered可以為所有儲存格新增1px的邊框。

（4）懸停高亮

使用.table:hover可以讓目前行懸停高亮

（5）緊湊型表格

table-condensed:壓縮，稍微小一點－減少單元格的內邊距。全部塗抹後是這樣的。

代碼清單

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<code class="html keyword"&gt;table classtable class= "table table-border table-striped table-hover table-condensed"&gt; <code class="html keyword"&gt;                    頭&gt;頭&gt;頭&gt;                         td&gt;                         <code class="html plain"&gt;td&gt; <code class="html keyword"&gt;                         td&gt;作者？                         <code class="html plain"&gt;td&gt;配 <code class="html keyword"&gt;                         td&gt;                     <code class="html plain"&gt;tr&gt;tr                        <code class="html keyword"&gt;                    身體&gt; 身體&gt;身體&gt; 身體&gt; 身體&gt;身體 &gt;體 <code class="html keyword"&gt;                         tr&gt;tr&gt;tr 🎜🎜                            🎜🎜                                                          <code class="html plain"&gt;                             <code class="html plain"&gt;                                                     tr                          tr &gt;<code class="html keyword"&gt;tr&gt;<code class="html plain"&gt;tr                                                          <code class="html plain"&gt;                             <code class="html keyword"&gt;                                                          <code class="html keyword"&gt;<c></c>