bootstrap4

lipsum, lorem生成假文, 是在編輯器中按tab鍵時生成的, 那個時候就已經生成了, 因此你在瀏覽器上看到的內容就是編輯器中的內容, 這個內容不會再變了. 因此你不要企圖想刷新瀏覽器而改變假文的內容.

code標籤, 使字體顏色變紅, 略有底紋; pre標籤被加上了灰色底紋和圓角邊框.

關於表格的樣式:
.table基本樣式
.table-bordered, 加邊框;
.table-striped [strai], 條紋, 隔行變色
.table-hover.
.table-condensed 緊縮, 高度小一點點 , 注意也有ed.
注意, 要加border, stripe 都要加ed. 這些附加樣式 ,都要加 table這個基本樣式.不然無效..

表格的顏色?
固然是指表格的行的 顏色, 有四種
tr.active,
tr.danger,
tr.warning,
tr.success.
表格 的顏色是針對表格的行, 應用 響應的類..

響應式表格是指, 將表格包裹在一個 div中, 給div以.table-reponsive類, 則表格在屏幕縮小時, 會出現水平滾動條.<div class="table-responsive"><table class="table">....</table></div>

注意表格的類樣式, 都是 以table爲開頭作前綴的...

一個小插曲: 在editplus中, 不要像 vim中那樣, 把"跳轉到 匹配的括號處" 的鍵盤鍵設置爲 %(也就是shift+5). 這將致使你輸不進 百分號! 由於editplus不像 vim那樣有 幾個模式, vim中的%跳轉括號匹配, 人家那是在normal模式下, 你editplus是沒有normal模式的,只有插入模式!!

顏色, 好像對於不少bs控件都有相應的 顏色類, 常見的都有: success, info, warning, danger, active, hover , 默認按鈕顏色 btn-default.等.

---

form表單的使用

1. 在bs西方世界中, 他們認爲表單的文字標籤lable是放在input控件上方的. 而不是左右排版的, 這樣的話便於排版對齊;
2. bs把 一個label和對應的一個 控件放在一塊兒, 做爲一個 div.form-group.

3. label 中的for是對應控件的id, 不是name, 由於name能夠有多個相同的, 而id是惟一的. for中的id不要加#, 只有在 css中 jquery中才須要加井號等選擇器符號. 關於id, 若是簡單起見, 就在類型或者名稱的後面加上-id後綴就能夠了, 如: name-> nameid, passwd->passid...

4. bs中的類, 它更多的是強調做爲一種樣式, 對你前面的標籤是什麼, 則不是規定的太死, 如btn, btn-danger, btn-success等 對於div, input標籤都是能夠生效的...

input控件的類主要有: .form-control和表示大小的 .input-lg類, input-lg類使得輸入框的高度更高一些.
div.form-group中的input控件的邊框顏色默認是灰色的, 要想使input控件的邊框有顏色, 須要在外面的div.form-group上添加類 has-success, has-danger, has-warning等, 注意這裏是has前綴, 不是 form前綴, 即不是form-success的顏色類.

bs中的複選框的實現是: 仍然是一個form-group, 而後是一個div.checkbox>, 包含一個label標籤, 這個label標籤整個把 input控件和標籤文字 給包含了... 再也不是原來的label和input方式.

<div class="form-group"><div class="checkbox"><label><input type="checkbox" />check me out</label></div></div>

關於控件的幫助說明文字, 是:　用段落p加上類help-block 即: <p class="help-block">說明文字 </p>

textarea控件, 只需放入 form-group中, 加上form-control類就行了, 要去掉它默認的列寬, 由於默認要支持橫向寬度的拉伸...

水平排列的radio和checkbox
有兩種方法能夠實現, 一是,直接對label標籤加上radio/check-inline類, 可是要刪除原來的div.checkbox, 即只須要 lable標籤就行了, 沒必要在外面加form-gorup 和 .checkbox等類. 另外一種是 仍是使用原來的統一的樣式: [統一的風格是: 一個 div.form-group, 而後裏面是 div.checkbox(有的是form-control), 而後裏面是input checkbox, 只是把 checkbox-inline(或者 radio-inline)樣式加載div.checkbox或者 div.radio 上 感受仍是第一種, 只使用 label 加類樣式的方法更簡單 直接!!!.

bs和h5中新增了input類型type=email的控件, 並且原來的text控件的value屬性, 也能夠用 placeholder屬性來表示 form表單中的role屬性是一種描述性質的屬性, 其實你能夠不寫, 它主要是寫給bs看的, bs會參考這個去佈局. 其餘還有不少這樣的role屬性描述 , 一般就是和標籤的名稱一致的, 如table role="table"
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">

注意, div.form-group表單組並非 必須的, 沒必要像某些視頻教程上講的那樣, 嚴格一致, 反而太教條了, 一般 只是: 輸入組(input type=text 或者textarea的 須要輸入內容的控件時, ) 類型的組件要求放在 form-group表單組中, 其餘的, 如radio , checkbox等 都不要求放在 form-group中.

複選框的類型是checkbox, 而單選框(注意名字仍是叫 "框"), 但其實它已經不是一個矩形框了, 因此 後面不能加box , 不是一個box了 類型就是 radio了, 不是＂radiobox"

注意在表單中, 輸入控件input type=text和他前面的label之間並無 br換行標籤, 仍是上下 排列了, 這個是因爲 類 .form-group 和 form-control 等類樣式內部就給你已經添加好了的了. 你不用再去寫 br換行了!

使用form表單元素標籤 和 柵格系統混合使用 的時候, 那個form-group 就至關於 柵格的.row行 了, 所以就沒必要再使用 .row的div了....只是把label和控件標籤放在對應的列 div.col-md-x中就行了....

表單包括其餘全部元件的 顯示和隱藏, 使用類 : hidden/sr-only, show. 這個不僅是針對哪個類, 而是針對全部的組件, 它是一個輔助類....

input輸入框的 佔位符 placeholder屬性, 跟value是不同的! 它是要配合底層bs本身寫的js一塊兒工做的, 當刪除 後, 它的值是要恢復到佔位符的內容 的.

水平form, 只要給form增長一個類 class=form-inline就能夠了, 好像不少元素, 塊級的元素, 豎直排列的, 均可以經過 ...-inline來作到水平排列, 如前面的 radio-inine, checkbox-inline等. 可是也能夠和 col-md-x 混合使用 , 採用 form-horizontal類.

注意label標籤的寫法, 不少時候, 這個標籤的寫法是 在改變的, 有的時候, 是放在div中的, 有的時候是直接寫到, 沒有放在div中, 有的時候, 須要加 一個 control-label 的.

柵格系統的md-col-offset-x 也是頗有用的! 在有些時候, 你可能須要和 前面的內容 對齊, 可是, 又沒有或不想在前面插入其餘元素, 這個時候, 就可使用 偏移了!!!

slect 下拉菜單, 也只是 在 select中, 加入類 : form-control, 並且能夠設置多選multiple , 對於多選下拉菜單, 能夠設置 size="6"之類的尺寸來控制 select顯示的高度, 能夠顯示很大的空白行高度的.

對於 水平佈局的表單: 單純的lable標籤, 的類樣式有:　control-label, 可是要調整 一行文字和 label標籤對齊, 可使用 p 標籤 (最好是隻用這個 p標籤...)加上 form-ccontrol-staic類, 注意不是control-label-static 類

注意區別, form表單的 內聯表單 和 水平佈局的表單, 它們是不同的, 內聯表單, 是全部的表單內容放在一行中, 成爲inline行級別的 表單. 而水平佈局的表單是說, 將input控件和跟他相關聯的 lable放在同一行(由於默認的是 佈局方式是 上下方式), 這時就要使用 .form-group 代替柵格系統的.row行了.

禁用表單的方法是, 在input中使用 disabled 簡潔屬性. <input type="text" id, name, disabled>

表單的尺寸, 就是 3個, 默認 就是 .input-md, 其餘大小是: .input-lg .input-sm

---

能夠作btn的元素, 原則是能夠是任何元素, 可是做爲有意義的 是這樣幾個:
button自己標籤;
a超連接;
input控件中的type=button, submit, reset

btn的樣式有:　<button標籤 class="btn btn-default, btn-primary, btn-info, ..." 還有一個 btn-link, 就是去掉周圍的邊框, 就變成一個連接形式的了.
也可使用 a標籤, 把 連接作成 按鈕樣式,即自己來講 , 是一個連接, 可是外觀能夠作成 btn形式的.... <a class="btn btn-default btn-primary btn-info..." href="">...</a

同理 , 按鈕也有 表示大小的類: .btn-lg .btn-sm, .btn-xs. 沒有.btn-md, 也就是不寫, 表示的是默認的按鈕的大小!

同理的, 前綴...-inline表示 行級, 前綴-block表示 將行級元素轉變成塊級元素, 如: .btn-block將使按鈕變成塊級按鈕,充滿父元素

---

bootstrap的圖片類:
樣式圖片 .img-rounded, .img-circle(自動切割成圓形) .img-thumbnail
響應式圖片, 對於比較大的圖片, 使用 .img-responsive, 此時, 圖片將隨着瀏覽器尺寸的大小而 變化...

bootstrap的工具類:
表示關閉的元素:

1. 關閉的符號, 使用 ×這是一個html轉義字符, 其中的times 表示乘以, 倍數的意思, 這裏的叉叉, 實際上是 乘法的意思, 只是外形的表示方法了.
2. 關閉符號的類是: close, 不是closed, 那個是表示"已經關閉了的", 很顯然這裏不能使用closed, 要使用 close. close類的做用, 並非生成叉叉, 而是將叉叉符號 定位在塊級元素框, 如well, 等的 右上角的適當位置.

3. 固然, 關閉的符號也能夠是你本身想寫的任何東西, 如: 字母x , 大寫的X, 還能夠用style來 改變字體大小和顏色等...

4. 向下的小箭頭: <span class="caret"></span>

在輔助類中, 文字和背景顏色如同之前的全部組件同樣, 也是有顏色的, 並且文字的 顏色也大體是: p.text-muted, .text-primary, .text-info, .text-danger 背景顏色: .bg-warning, .bg-primary等

---

bs的組件, 是指具備必定的css樣式 , 同時, 配合本身寫的js動做...

glyphicon圖標是類, 而不是圖片, 因此能夠本身添加 style樣式改變它的大小和顏色等等.

dropdown下拉菜單的使用 :(它是css樣式和js的組合)
記住3個相關聯的類就行了. (就是經過這些相關的類, 把幾個部分結合在一塊兒的:

1. 最外面總體的是 div.dropdown
2. 而後是 觸發的元素, 能夠是 a連接的btn樣式, 也能夠是button的 btn樣式. 用它來作觸發, 來顯示和隱藏下面的列表. 內容是: dropdown或相關文字+caret. 最重要的是 它的屬性要設置爲 data-toggle="dropdown" , 而後js就是經過這個data-toggle找到下面的ul列表的.
3. 最後, 具體的內容就是下面的ul列表. ul的類是 dropdown-menu. 下面的li能夠是: dropdown-header表示標題, divider表示分隔線(注意是divider, 不是dropdown, 由於這個就是一個divider, 跟下拉不下拉沒有關係的...). 其餘li就是包含 a連接就行了.

dropdown下拉菜單, 和 表單的select 下拉列表的區別?

1. 一個是 下拉菜單, 一個是下拉列表, 都是 下拉, 可是 分別是 "菜單"和 "列表"的區別;
2. 下拉列表只是一個部分, 而下拉菜單其實是包含的兩個部分的, 一個是觸發, 一個是ul列表;
3. 用處也不一樣 下拉列表是直接從多個列表中選擇的, 而下拉菜單是 相似於 應用軟件的菜單 式操做, 單擊一個菜單項, 下面彈出相應的多個選擇菜單子項. 並且菜單子項主要是用來完成某個操做或連接的, 在html中, 如 導航列表中, 就是一種 下拉菜單的方式....

在使用zen coding編寫代碼的時候, 若是是內容, 必定要放在 大括號中, 無論加不加 大於符號, 不然, 若是是中文的內容會使emmet失效, 若是是英文的"內容" , 沒有大闊哈的時候, 會把英文的"內容"生成標籤..... 除非是 lipsum自己還要生成假文的狀況.

按鈕組 按鈕工具欄 , 按鈕和下拉菜單按鈕組的使用

1. 只要把多個按鈕放在 div.btn-group中就行了.
2. 把多個按鈕組放在 div.btn-toolbar 不用再是 .btn-group-toolbar, 是toolbar下面再包含 btn-group... 中就造成按鈕工具欄了

3. 要把按鈕和 下拉菜單組合在一塊兒, 方法是 把下拉菜單做爲一個按鈕組, 而後和其餘按鈕再一塊兒放入另外一個大的按鈕組中. 注意, 這時的下拉菜單最外面的那個div.dropdown要改爲 div.btn-group, 就再也不是dreopdown了.

4. 兩端對齊 的按鈕組, 就是在 外面的類使用 .btn-group .btn-group-justified, 而後裏面 的按鈕不能使用 button標籤, 要使用 a 鏈接標籤.

5. 下拉菜單中的左右對齊是 說的: 下拉菜單的內容 ul部分 相對於上面的觸發按鈕的對齊方式, 對齊的類 pull-right 是放在 ul上面的 ul.dropdown-menu.pull-right

下拉菜單的另一種寫法和實現: 原來的最外層div的類是.dropdown, 第二種方法是: 最外層的類改成.btn-group, 這時, 裏面的觸發元素的類, 就要寫成.btn, .btn-primary, .dropdown-toggle(這個好像能夠不寫!) ???(可是要記住後面的data-toggle=dropdown這個屬性必須寫), <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> dropdown <span class="caret"></span></a> 既然下拉菜單中的觸發既能夠用button, 也能夠用a, 並且用a必定是沒錯的!

分裂式下拉菜單, 就是在原來的dropdown下拉菜單裏面的觸發按鈕的前面再加上一個按鈕就行了, 注意, 後面的觸發按鈕和ul不要單獨再放一個div.btn-group中了! (後面的這個下拉菜單就不要使用文字內容了, 就只是包含一個caret就行了, 固然你也能夠在下拉菜單上使用文字, 可是這樣很差!)

下拉菜單, 分裂式下拉菜單的 反面:向上彈出式菜單：　只要在　div.btn-group上加上 dropup的類就行了, 其餘的下拉菜單的其餘內容, 包括觸發按鈕和ul部分不變...(觸發按鈕和ul中的dropdown仍是不要變!)....

---

輸入框組:

就是前面一個form表單元素(如文字, radio/checkbox, 按鈕), 後面加上一個輸入框, 前面的表單元素對後面的輸入框做一個附加 功能
基本骨架就是:

div.input-group
-說明/附加等功能的 元素: span, 對文字, radio和checkbox是input-group-addon類, 對其他的, 如按鈕, 下拉菜單等是 input-group-btn (是btn, 不是button!) 類
span裏面是包含的具體內容, 如文字, radio等元素...
-input 控件: input type="text" class="form-control" placeholder="username"

在須要排版系統的時候, 就是用 bs的柵格系統: 意思是說, 若是沒有特殊要求, 全部的塊級元素都是 獨佔一行的, 若是你要在 同一行中 佔多個塊級元素的時候, 你就使用 柵格系統, 先劃分紅多個列, 而後在每一個列中, 在放置 塊內容 ....

---

bs的導航

有多種導航方式:
第一種: 使用ul和li的方式:

1. 標籤頁導航 ul.nav .nav-tabs, 下面是li, 其中,初始化被選中的li使用 li.active類
2. 膠囊式導航 ul.nav .nav-pills, ...
3. 堆疊式導航, ul.nav .nav-tabs/pills, .nav-stacked, li...
4. 兩端對齊的導航: ul.nav .nav-tabs/pills .nav-justified ...
5. 禁用的導航項, 在 li.disabled. 隻影響外觀, 但不影響功能
6. 帶下拉菜單的導航, 將li下的內容替換爲 下拉菜單, 並且, li的類設置爲 .dropdown或 .btn-group.

bootstrap的導航條

類的關鍵詞是navbar, 或者: navbar-....

1. 默認的導航格式: navbar navbar-default (還有反色的 navbar-inverse)

2. 導航條的位置固定(漂浮格式): navbar navbar-fixed-top/navbar-fixed-bottom, 這時要把body (注意是body標籤, 不是 .body類)的padding-top: 50px; 以便把下面的內容給擠下去, 留出來, 省得內容被導航條所遮蓋.

3. 導航條的骨架:

   在html5中, 自定義屬性是用data-開頭的, 因此這個特色在bootstrap中隨時均可以看到. 好比: data-toggle="表示切換樣式, 以下拉菜單中的dropdown, 導航條中的collapse" data-target="#目標id"

div.navbar .navbar-default
         //頭部div,類是navbar-header, 注意bs中 ,有時的組件的頭部用的是head, 有的是header, 這裏是header
         div.navbar-header                        
              // 右邊的條形按鈕    
              button.navbar-toggle data-toggle="collapse" data-target="#navbar1"    (注意這裏是button, 不是div)
                  span.icon-bar            // 注意這裏是 icon-bar, bar就是橫條的意思.
                  span.icon-bar

             // 導航header 部分的brand, 類是navbar-brand
             a.navbar-brand ....首頁</a>
        //導航內容div, 類是.collapse, navbar-collapse  
        div.collapse .navbar-collapse id="navbar1"         // 注意這裏的collapse和navbar-collapse類是放在div上的, 不是放在 ul上的
            ul.nav .navbar-nav 
                li  > a..... (除首頁以外的其餘連接)
                li > a.....
                li > a.....

導航條中的其餘元素, 導航條中能夠放置其餘元素, 功能不變, 只是樣式改變了, 整合到導航條中了.

因而可知, 其實咱們在網站上看到的不少比較好看的樣式, 不少都是要用css和js來實現的, 這些能夠用現成的框架來寫, 就是css和js的, 只不過別人寫好了的, 就不用咱們再來寫了 只要是吧注意力放在邏輯業務上來就行了,不過這個也是很悲哀的. 人家就是常常作"輪子"的.

導航條中的其餘元素(!!可是不屬於導航條中的導航內容項!!), 要整合到導航條中去, 跟原來的用法差很少 , 只是 要加上對應的 navbar-??? 前綴就行了 , 可是 可是要注意了, 這些額外的元素你能夠放在ul的 li中, 做爲一個 連接項, 可是一般是不放在ul中, 放在ul以外, div.collapse類裏面, 可是若是你放在ul中, 可是又沒有放在li裏面, 就會出錯! .

1.能夠單獨地去設置這些元素在導航條中的位置, 設置 位置類包括：navbar-left, .navbar-right, 這兩個位置類是　pull-right, pull-left的mixin版本, 元素之間的距離和位置, 一樣的能夠經過style padding和margin等調整...

1. 導航條中的表單: form.navbar-form 其餘該是form-group的仍是...
2. 導航條中的文本: 使用p標籤, 加上 navbar-text類: p.navbar-text,, 仍是要使用 pull-right, 它跟navbar-right, 仍是有細微的差異的.navbar-right可能致使文字不能完整顯示...
3. 導航條中的標準按鈕, 沒有在form表單中的按鈕: button.navbar-btn
4. 導航條中的連接: a.navbar-link

麪包屑導航

ol(或者是ul), 加上類 .breadcrumb, 其餘的li>a...
一般最後一個 li中 就不要包含 a連接了 , 由於當前頁面是不須要 進行連接跳轉 的,
只是在當前的麪包屑項目 所在的 li中, 加上 active類 就行了

---

要想連接a不跳轉, 使用 : href="javascript:;"就能夠了. 竟然在ie中使用 href="javascript: void();"還會跳轉, ie確實是前端開發者的噩夢. 通常就放棄ie.

application.js是作什麼用的?

laquo 和 raquo是什麼?

區別quot和ldquo的不一樣:
"是 英文中的 雙引號, 單引號是 single-quote;
‘ ’ “ ” 這些所謂的 左右單引號, 左/右雙引號 都是針對中文的單雙引號的. 其中的l表示left, r=right, s=single, d=double , 那麼重點是quo, 表示quote引號的意思.
同理, 這裏的quo也是 引號的意思, a=arrow, 箭頭, 所以, aquo 就是表示, 箭頭形式的引號, 即中文中的書名號: 因此 &l-aquo; &r-aquo;就是左右書名號....

html中的特殊符號: 可使用html中的轉義字符表示, 也不必定要 所有 用 轉義字符, 也能夠經過各類其餘方法, 如輸入法, 軟鍵盤等進行輸入, 如五角星★★, 就能夠用軟鍵盤來輸入....

---

bs中的分頁 pagination的使用

採用ul>li>a結構, 在ul上使用 pagination類, 而後, 必定要砸li下包含a, 不能直接使用li下的文字內容.... , 左右箭頭 使用 : « he »

只是翻頁的結構:
ul.pager >li>a... "上一頁""下一頁"

包含向前向後的 兩端對齊分頁:
ul.pager > li.previous + li.next 類

bs中的標籤 的使用

標籤就是放在文字內容的後面, 給一個說明, 註釋的做用 的東西:

1. 標籤一般是放在 標題 hx的內部的;
2. 所以, 標籤的大小是隨着前面的 hx的大小的改變而改變的, 就再也不單獨地給他設置 .lable-lg 之類的類了
3. 標籤還有顏色類: label-default, label-primary, lable-success, .label-info/warning/danger...
4. 最重要的是, label 這個類 不能單獨使用, 必須跟上後面的標籤顏色類: span.label.label-default. 後則後面的標籤是不會被顯示出來的!
5. 注意 label這個單詞的寫法, 是la-bel, 是bel, 至關於 bell鐘錶的意思, 不是 ble後綴...

徽標, 就是有點相似於 label的樣子, 類是 ：　span. badge. 只是比label 的樣式要小一些而已. 徽標中, 若是文字比較小的話, 外觀就會顯示爲圓形, 若是文字內容較多的話, 就顯示爲圓角矩形...

大屏幕, 就是顯示一個比較大的 背景 div, 主要是用在 首頁的寬幅 標題, 寬幅廣告, 寬幅logo等等. 類是div.jumbotron= jumbo-tron. 大屏幕裏面通常是 hx,如h2等加上 p段落內容等等... 默認的大屏幕是放在 .container中的, 若是要使大屏幕 全屏顯示, 則把 div.container放在 div.jumbotron 的裏面, 即反過來放.

bootstrap的樣式是默認的, 可是咱們能夠在 style中,另外設置, 方法就是 , 對其中的類 的樣式從新寫...

縮略圖的樣式

1. 一般是放在柵格系統中
2. 骨架是: 在 a連接標籤 上寫 .thumbnail的類, 而後裏面的img 放holder.js的站位符..
   
3. 縮略圖的外觀就是在周圍出現邊框線, 若是給圖片自己加上 .img-thumbnail 的話, 就會出現兩個邊框線, 只不過, 外面的邊框線隔得更遠一些.

使用 a 標籤的意義, 不少時候, 不必定真的是 爲了 超連接, 極可能的目的, 是 爲了 獲得 單擊連接的 樣式的 效果.

縮略圖組件中的定製內容, 就是將 原來thumbnail的類放在a連接標籤上, 改成 放在一個div上, 即: div.thumbnail 這樣就能夠造成一個大的縮略圖樣子了
骨架:

div.thumbnail
    img...        // 上面的圖片內容....
    div.caption   // 下面的文字內容....
        h3....
        p...
        p>button...

警告框的使用

在彈出某些操做後的提示:警告信息時, 可使用這個警告框
警告框的類是:　div.alert> p標籤內容.., 顏色類: div.alert .alert-success/info/warning/danger...
能夠關閉的警告框是 在 div包含中,放一個button, 注意這裏的類就不能是btn, btn-primary等, 而是 .close, 屬性data-dismiss="alert".

進度條的使用 :

總共在最外面使用的類, 是: div.progress
裏面纔是表示進度條的 類: div.progress-bar

還有其餘相關的類, 進行樣式的設置, 要注意這些類是放在哪一個div上的, 是放在div.progress 上, 仍是放在 div.progress-bar上.

1. 帶條紋的進度條, 放在最外層的 div.progress .progress-striped

2. 激活的進度條, 放在最外層的 div.progress .active

3. 進度條的顏色, 放在 裏面的那個div上: div.progress-bar .progress-bar-success/info/warning/danger, 默認的進度條是藍色等.

4. 進度條能夠堆疊, 只要把多個div.progress-bar 放在同一個 div.progress 裏面 就能夠了.

連接a的 href 不一樣樣式:

1. a href="", 若是等於空的話, 就是跳轉到當前頁面的 頂部;
2. a href="#", 也是同樣的,
3. a href="javascipt:;", 其中javascript:表示僞協議, 其餘如　mail:// tel:// file://等都是僞協議...

a 是anchor錨, 頂樑柱, 精神支柱的意思. a 是縮寫.

a中的href若是用 # 的話, 就表示使用頁面錨點的意思.

任何頁面, 其實都包含一個默認的錨點, 那就是 頁面的頂部, 頁面開頭的地方,就是一個錨點.

在html, css , jquery中, # 都是表示 元素的 id. 所以, 要使用錨點, 除了在 a 的href 屬性中使用 #表示錨點外, 錨點的定義, 有兩種方法:
1.一是, 使用w3C的規範, 使用 id來限制一個元素, 那麼這個元素就 定義爲一個錨點了.

1. 二是, 使用 <a name....來定義錨點, 如: <a name="top"> </a> , 固然你能夠叫第一種方法爲id錨點, 第二種方法叫 命名錨點.

引用錨點的方法 ,都是同樣的 , 是 href="#錨點名稱", 或者頁面外地錨點: a href="other.html/#anchor-name"

z-index爲負值的時候，ff下該層就被置於默認的不可見的z-index：0的層以後，就至關於一個按鈕上面隔了一層玻璃，這樣你固然按不到它了，通常z-index不要用負值，用不一樣大小的正值來取代

media媒體的使用

media包含一個圖片和一個div的文字內容 , 圖片放在 a連接中, div內容的類是.media-body , 包括一個 .media-heading的標題, 和 p文字內容.
骨架是:

div.media
    a.meida-left.media-top/middle/bottom(表示圖片和文字的對齊位置) > img 圖片
    div.media-body
        h3.media-heading
        p

1. 媒體的嵌套, 使用場合, 是在, 一個回覆/評論的後面, 又跟着多個評論/回覆, 這個時候就須要多個media的嵌套了. 一種方法是: 可使用 ul.media-list >li 的方式,

2. 第二種方法是: 也能夠直接在div.media中嵌套 div.media 建議使用 這種方式, 比較清楚簡潔.

在輸入假文的時候, lipsum默認的是20/30?個單詞, 但有時後, 想要少一些單詞, 有時候, 卻想要更多的單詞個數, 這個時候, 沒必要再屢次地去使用lipsum, 直接在lipsum/lorem的後面用更大的數字就能夠了, 如lipsum200