tp剩餘未驗證內容-5

通過實踐， ie678是不能正確顯示解析bs的，因此要用ff和chrome瀏覽器。

page-header類是有特殊樣式的 在標題下有一條淺色的細線條，源代碼中有： border-bottom: 1px solid #eee;

關於bs的標籤類？

• 首先要注意單詞的書寫正確： 標籤是 label（後面是bel， bell鈴聲助記）， 而不是lable。 lable沒有這個單詞，或者多是英式英語
• 注意label自己的類樣式， 是 font-size：75%， font-weight:bold; 可是他的顏色是：color:#fff; 因此你初看起來多是看不到的, 要使用 label的附加樣式, 好比: label-default label-primary等.

jquery選擇器中的字符串一般是加 單引號. 可是若是內容中包含等號=的話,那麼 等號後面的字符串自己也須要加引號,所以,此時就會出現兩個地方須要引號. 就要用單雙引號了, 一般來講: 最外面的部分用雙引號, 裏面的內容等號後面的字符串用單引號. 好比:bs中: $("a[data-toggle='tooltip']]").tooltip('show');

tooltip是對原生的a標籤的一種樣式從新生成, 主要是對 錨點a和按鈕button 實現hover/focus時的文本信息提示. 要添加 data-toggle=tooltip屬性,提示內容就是title屬性的值. 固然也有其餘屬性, 好比data-placement='left/right/top/bottom/auto' tooltip和popover不是純粹 的css, 要經過js來激活, 如上面的代碼所示.

popover和tooltip基本上是相似的. 只是在樣式上有些不一樣, popover要比 tooltip多一個 標題區域 / 或者說是一個 內容區域. popover分紅了兩部分,其中一個是title屬性, 另外一個是data-content="的內容", 也有 data-placement的屬性.

tab組件和 tab插件的區別?

• 二者在 "頭部ul.nav .nav-tabs或 .nav-pills .nav-stacked" 的內容基本上是同樣的
• 組件只有頭部的標籤等, 沒有實際內容. 而組件則增長了 tabs標籤中內容載入的部分, 所以, 其ul>li>a的 href屬性值就要寫成後面對應 的 要載入的div內容部分的#id值
• tab插件的結構 的內容部分是: div.tab-content > (div.tab-pane.fade .in .active(這裏的第一個tab也要有active的類)) + (div.tab-pane.fade 這裏就沒有.in 和.active的類 了)*x
• tab插件的方法是 tab(show/hide/toggle/ ???...), 事件有 show.bs.tab和 shown.bs.tab等, 他們的事件參數是: functon(e){ e.target表示當前激活的標籤項, e.relatedTarget表示上一個激活的標籤項.

---

scrollspy是在同一個頁面內, 經過監控 (設置爲position:relative)的 body元素 或div元素(style="heigth:200px; overflow:auto;")的滾動條的位置, 去修改(添加和刪除) 目標元素 (一般是 導航欄 或 導航元素)中 相應 列表項 li的 .active類.

• 所以 body中的div的id值, 或 div中的section/hx/p等元素的id值, 就要和 導航中的 li的id值 相同 /相對應.
• 由於正是 scrollspy插件 監控到 滾動條的位置 滾動到 某個section/區域部分的位置 (二者的位置對齊)時, 纔去修改的ul的li對應的.active樣式的.

初期開發只考慮大中型屏幕, 由於如今, 即便是最小最老的顯示器屏幕的寬度都是 1024px了, 後期若是須要, 能夠再對手機屏幕作一些優化就行了, 這種優化也比較容易. 如今的智能手機能夠直接訪問http/https等協議, 不須要另外寫什麼apk和網頁了.
所謂響應式輔助工具類, 是指 包含 以 visible... hidden 開頭的類樣式, 好比: visible-xs就是 "只對 xs屏幕設備可見", 而 hidden-md就是 只有 md屏幕的設備不可見.

下拉菜單的插件和對應的組件之間的區別?
插件只是多了一個方法而已: 用觸發器元素a/button 的 dropdown('toggle')方法 來代替了 data-toggle 屬性, 其餘東西和內容 跟 下拉菜單 組件沒有什麼區別.

要理解js插件的工做原理, 首先是要加載 dom元素, 而後纔對這些 dom元素 執行相應的 css /js等. 所以, 寫前臺內容的時候, 不論是怎樣的組件或插件或css, 都應該先寫好 相應的html dom元素結構.

bs插件的三要素:

• 屬性(選項), 一開始初始化就生效的, 經過data-屬性 或 options 選項使用
• 方法, 供 手動調用
• 事件, 主要是用做鉤子使用, 好比用on來綁定 on('show.bs.modal', function(){...})
• modal的show方法調用後, 並不必定立刻就顯示出來(可能有過渡), hide方法並不必定立刻就不可見了.

插件和組件的區別, 組件是一開始就顯示 的, 而插件一般要 由觸發器 觸發才顯示 (打開的). 可是 他們的內容, 都是 事先要寫在 dom/html代碼中的.

---

carou'sel [k2r2'sel] 旋轉木馬, 在bs中就是"輪播"插件

bs中的複選框組, 是指 將包裹 checkbox的標籤label定義爲button樣式, 同時定義 多個標籤外層的 包裹div爲 btn-group, 並添加 data-toggle=buttons屬性.

div.btn-group[data-toggle=buttons] >  (label.btn.btn-default > input[type=checkbox]{選項$})*3

button插件的 屬性data-loading-text只是 表示loading文本, 可是 真正讓 按鈕上面顯示這些 文字, 必須用js 來激活: 方法是:
$('.btn').button('loading').delay(1000).queue(function() { ...; $(this).button('reset')});
而按鈕插件的 按壓狀態 的激活和切換, 只須要設置 按鈕的 屬性 data-toggle='button';
注意 , 按鈕元素的css和插件的區別, 前者只是外觀上的顯示, 沒有按鈕動態的東西, 而按鈕插件, 能夠在 按鈕上顯示 "loading文本..." 以及按鈕的 "按下/彈起"
等狀態的動態改變.

事件的動做, 有動詞不定式和 完成時兩種 狀態. 動詞不定式 是 to + show( show.bs.modal ) 表示模態框將要被顯示.
事件分紅三個階段:
事件開始 (觸發,此時 生成 事件對象/ 事件數據 參數等)
事件執行
事件結束 shown等.

使用BS的時候, 要注意 類樣式的規範性和 html 結構的合理性 . 若是你 使用 框架, 就要 注意 挖掘框架的精髓, 在實際開發中儘量使用框架自己的類實現佈局,
而避免本身額外的去寫類樣式.

警告框 是一個 block樣式的塊框, 可是它做爲插件, 是由於 他最右邊的 a.close 叉叉 符號 是能夠關閉這個 塊框的.

<div class="alert alert-success" id="myAlert" >
    <a href="javascript:;" class="colse" data-dismiss="alert"> &times </a>
    <strong> 成功</strong> the operation finished successfully! 
</div>

幾個css屬性的含義:

• line-height: 1, 注意,這個 1 不是寫錯了, 不是1px, 而是 百分比表示法的一種 簡單寫法, 1就表示 100%, 1.5表示 150%, .5表示 50%. 因此line-height: 1 表示 按照該元素字體自己的高度設置行高, 即: 上下都不留空隙
• text-shadow: 包括h-shadow, v-shadow [ , blur, color] 可使用多個文字陰影, 之間用逗號分隔, 能夠造成多種複雜絢麗的效果
• 不透明度: 有兩種, opacity: .2 是 css的標準屬性. 可是ie678 不支持 opacity, 因此爲了兼容, ie的透明度是經過 filter: alpha(opacity=20) 來實現的.

.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}

---

bs有六種語義的狀態, 分別表示不一樣的背景顏色: -default 是默認的灰色, -primary是藍色, -success是綠色 -info是天藍色(淺藍色), -warning是橙色(黃色),
-danger是紅色

backdrop [dr^p]. 英式英語中的 o音, 在美式英語中發 ^ 音.
表示 "舞臺背景", 是表示 bs中 modal模態框的 鼠標失去焦點後, 的 模態框背景顏色.

實現模態框的外觀 選項控制方法, 一種是 用data- 屬性來指定, 另外一種是用js的 options.

在整個bs的插件中,要實現 被控制元素的觸發,能夠有兩種方式,一是使用 連接錨點a ,那麼控制目標用href屬性來指定; 一是用 按鈕button, 則用data-target屬性.
並且, 模態框的顯示, 仍是應該用觸發器來顯示纔是比較合理的.

模態框的結構是:

div.modal.fade
  > div.modal-dialog
    > div.modal-content
    >div.modal-header
      >h4.modal-title + a.close/或者button.close
        > div.modal-body
    > div.modal-footer+button[data-dismiss=modal]

注意在bs中,插件中表示 頭部 的類,有的是用 .??-header, 有的是用 .??-heading, 這個要注意區分. 若是是標題的類,要用相應的h4.??-title 類. <font color="red> 可是要注意, h

bs中, transition.js 是用來表示css和js的過渡效果的 他是一個輔助類, 主要是加在其餘插件中,好比.fade 類樣式, 它們自己不多單獨 使用的, 是一個基礎 的 被依賴的類.

可摺疊插件collapse?

• 包括可摺疊面板(又叫accordian)和摺疊組件
• accordian其實是一個面板組, panel-group, 由多個面板panel組成. 只是每個panel在原有的基礎上增長了一些 觸發/顯示/隱藏面板內容的 類:

div.panel-group[id=accordian]
    >div.panel.panel-default
    >div.panel-heading
        >div.panel-title >a[data-toggle=collapse][data-parent=accordian][href=後面的被控制的面板的內容, 在這裏是#collapseOne]
    >div#collapseOne.panel-collapse.collapse .in
        >div.panel-body {..........}

......

簡單的摺疊組件(不是摺疊面板的)
button[type=button].btn.btn-primary[data-toggle=collapse][data-target=#demo]{簡單的可摺疊組件}
div#demo.collapse.in{ ......sometext content....}

panel面板的組成?

• 分紅三個部分組成, 標題部分, body部分, footer腳註部分
• div.panel.panel-default或其餘帶有語義的類

>div.panel-heading > h4.panel-title
      >div.panel-body
      >div.panel-footer

其中panel-body部分能夠嵌入其餘任何標籤.

一般標題和具體的內容 是對應的, 好比 標題 hx後面就應該是 內容p 好比: h2 + p

實際上html標籤之間 並無嚴格的 包含 "大小" 關係, 由於有css的影響, 因此一般狀況下的div>p, 若是給div定義樣式{display: inline/inline-block;} 那麼 也多是p包含div,好比: p>div 特別是 標籤 li 和 標籤a , 它們能夠包含不少內容,包括div p h1 等等

因此列表組的應用?

• 列表組是將內容 原來的ul>li , 變換一下css樣式, (沒有js動做), 造成 通欄相似按鈕面板的樣式
• 默認的列表組的樣式是: ul.list-group > (li.list-group-item)*5
• 若是列表組要包含連接a的話, 就要改變一下, 不能再用 ul和li了: 要用 div代替ul, 用a代替 li
• 並且若是是包含a的話, 列表組的內容能夠包含得更多: 連接a中能夠包含任何其餘標籤, 包括 標題和段落

div.list-group
    > a.list-group-item
    > h2.list-group-item-title {....}
       > p.list-group-itme-text {.....}

---

能夠看到 html5中的data-屬性, 主要是用來實現 "js動做, js代碼功能的", 能夠用相應的js腳原本同等實現

列表組的做用和使用?

• 做用是, 對原來的ul>li的一種從新生成形式, 列表項之間沒有分離, 是整合在一塊兒的相似"按鈕面板組"的樣子
• 結構是 ul.list-group > (li.list-group-item)*3
• 若是要在列表組中使用 連接, 那麼就不能再用ul>li結構了, 要用div來代替ul, 用錨點a來代替li 即 結構是 div>a
• 能夠向列表組的列表項添加 標題和內容樣式:

div.list-group
    >a.list-group-item
        >h4.list-group-item-heading{some title text}
            >p.list-group-item-text{列表組內容}

div.carousel.slide#mycarousel 輪播插件包括3個部分

• 第一部分是輪播指示器 ol.carousel-indicators(這裏必須ol, 由於後面的li的data-slide-to是要按順序來指定的.)
  > li[data-target=#mycarousel][data-slide-to=0 /1 /2 等] 第一個li 和其對應順序的輪播內容都應該設置爲 .active
• 第二部分是輪播的具體內容 div.carousel-inner
  > div.item {具體的內容} // 內容通常是圖片或視頻等多媒體
  >div.carousel-caption{ "可選的內容 標題}

• 第三部分是兩個錨點a控件 a.carousel-control.left[href=#mycarousel][data-slide=prev] {‹} 和
  a.carousel-control.right[href=#mycarousel][data-slide=right]{›}

• 輪播的選項有: data-ride=true, 表示插件一開始就播放動畫; data-interval 表示輪播間隔時間, data-pause表示鼠標移入插件hover時, 插件是否中止播放, data-wrap表示
  插件是否首尾循環.

關於媒體的類的使用?

• 媒體的使用場合 主要是 實現 "圖文混排"(圖片-多媒體和文字混合排列) 主要是用在 博客類的評論樣式. 一般 圖片是浮動在 文字段落的左邊或右邊.

div.media
    > a.pull-left (a的做用主要是實現圖片媒體向左/向右浮動排列, 由於 一般點擊圖片時 都應該連接到該用戶的相關信息, 因此 用 a來封裝圖片)
        > img.media-object (這裏的media-object 樣式用來規定圖片和文字段落之間的 相對位置樣式)
    > div.meida-body( media-body正是 圖文混排的文字段落部分)
            > h4.meida-heading{文字部分的標題} + p {段落文字部分, 這個裏面又能夠嵌套 div.media...}

• 而媒體列表, 是用ul .media-list 來包含 多個 li.meida內容部分.

---

如今就能夠體會到, bs中的類樣式 , 和 html結構安排, 其實都有含義的, 應該是反覆推敲後決定的, 因此就是要 "理解" 它的類樣式的做用, 以及每一個結構標籤的做用, 爲何要這樣佈置html結構標籤.

---

在html中除了聲明h5, meta charset=utf8以外, 還要聲明 <html lang="en"> 這樣在表示某些英文符號 的時候, 纔不會出現位置上的誤差... 可是也有可能使用 <html lang="zh">

.nav-tabs和 .nav-pills的區別是什麼?
前者的li-item是連着的, 然後者的項目是分離的. 並且即便是 .nav-stacked也能夠用在 nav-tabs上, 成爲垂直的連着的導航元素, 這個使用仍是很廣的.

bs中的 html5 data-屬性是實現某種js功能的, 好比 切換功能/ 好比監視功能, 其中比較多的是 切換功能data-toggle, 少數的是 監視功能 data-spy
其中, 具備data-屬性的元素是發出該動做的元素, 而它的 data-target屬性或 a[href=...] 纔是動做要執行的對象.

進度條其實很簡單, 就是兩個div疊加. 只是它們的背景顏色不一樣而已. 其中的屬性 width:60% 表示的是 佔父容器 的長度. 並且進度條能夠有 過渡的 效果.
進度條相關的類 div .progress .progress-striped > div. progress-bar .progress-bar-success 等. 由於默認的進度條是 向左浮動的 因此 在同一個進度條容器中 , 能夠直接堆疊放置
多個不一樣語義顏色的進度條. 進度條的難點是 如何計算 隨動做執行而延伸變化的 進度條 的長度

關於警告框插件?
是在 dom節點中呈現的一種block框, 只是由於它是一種插件, 因此有動做, 有交互, 能夠關閉這個 框
結構是:

// (這裏要注意和下面的data-dismiss的區別,alert-dismissable是說這個警告框是 "能夠關閉的", 而data-dismiss則是用來關閉這個警告框的 )
div.alert.alert-success .alert-dismissable  
    > button .close [type=button][data-dismiss=alert] {×}  // 由於是.close類, 因此 即便是在前面也會 漂浮到警告框的右端的.
    {這裏是 警告框的內容}

</div>

而若是警告框中要包含 錨點連接a, 須要使用alert-link類: div.alert.alert-success > a.alert-link[href=....] {警告框的內容}

bs的 縮略圖樣式?

• 首先, 縮略圖是用來 表達 / 佈局 / 排列 圖片-照片-視頻等資料的

• 由於一般 佈局的 圖片是用來展現的, 當點擊它們的時候要跳轉, 因此, 一般用 a 來包裹圖片 img , 給a加上 .thumbnail類 , thumbnail類樣式,
  是增長 4px的 padding內邊距, 和 1px solid #ddd, 當縮略圖被hover和focus時, 經過改變 邊框的顏色來標識.

• 若是要給 .thumbnail 的 圖片 添加說明文字的話, 須要使用 .caption類 , caption的意思, 除了標題的意思外, 自己就 還有 "字幕, (圖片照片視頻等)的說明文字"
  可是給圖片添加 caption的話, 就要用 div代替 a

a.thumbnail > img...

若是有caption:

div.row> (div.col-md-3)*4
    > div.thumbnail
        >img...
        >div.caption
            >h3...+ p....

頁面標題, .page-header樣式, 是將 h1, h2, 等放在 div.page-header中, 重要的是 , .page-header類 會呈現出特殊 的樣式, 在標題下面會有 更大的padding, 並且會有一條很細顏色很淺的 分隔線