官方網站的教學已經非常詳細,在這邊節錄一些重點跟心得
http://getbootstrap.com/
我用的版本是3.3.5
由於BS3加入的特性就是提供mobile良好的支持
Navbar一旦目前viewpoint的寬度小於breakpoint,便會collapsed(折疊)
另外,目前Jusified(定寬度)的特性尚未支援
在這邊分成幾個部份的class來介紹
navbar-default
首先先使用navbar class,navbar-default則是預設的樣式
navbar-brand
拿來放自己的首頁(品牌)圖片(LOGO)
這個padding與height是固定的,若是要放上不同大小的圖片,則需修改css
navbar-form
把表單放在這個class之內,在較窄的viewpoint之下能有效的對齊
navbar-button
放置在navbar中的button,對齊用
navbar-text
放置在navbar中的text,對齊用
navbar-link
想放除了navigation元件之外的連結,用這個
navbar-right / navbar-left
將nav元件對齊右邊或左邊
navbar-fixed-top
將navbar固定在頂端,但是會蓋掉頂端的內容,所以body的padding要設
navbar-fixed-bottom
跟上一個類似,將navbar固定在底端
navbar-static-top
固定在最上方,若頁面捲動就跟著消失。
navbar-fixed-top / navbar-fixed-bottom 則是頁面捲動後,還是會在原來的地方
navbar-inverse
跟navbar-default相對的另外一個樣式
要製作基本navbar的流程
首先先在nav element裡加上navbar,navbar-default的class
再來加上role="navigation",這是為了增加可讀性,有些人並不會用nav element來作navigation
然後加上一個div element,class為navbar-header,在這邊可以加上navbar-brand
裡面的選單則用ul element,class為nav,navbar-nav
若是要加上responsive的feature
則設計一個俗稱為hamburger button,加上navbar-toggle的class
這個button有幾個屬性要加,首先是data-toggle="button",告訴js要執行的動作
再來是data-target,選擇要折疊/切換的 element id
這個element id 裡面應該要有collapse,navbar-collapse的class,裡面包含隱藏的內容
最後附上一個網路的教學網站,內容相當豐富
http://www.tutorialspoint.com/bootstrap/
navbar-brand
拿來放自己的首頁(品牌)圖片(LOGO)
這個padding與height是固定的,若是要放上不同大小的圖片,則需修改css
navbar-form
把表單放在這個class之內,在較窄的viewpoint之下能有效的對齊
navbar-button
放置在navbar中的button,對齊用
navbar-text
放置在navbar中的text,對齊用
navbar-link
想放除了navigation元件之外的連結,用這個
navbar-right / navbar-left
將nav元件對齊右邊或左邊
navbar-fixed-top
將navbar固定在頂端,但是會蓋掉頂端的內容,所以body的padding要設
navbar-fixed-bottom
跟上一個類似,將navbar固定在底端
navbar-static-top
固定在最上方,若頁面捲動就跟著消失。
navbar-fixed-top / navbar-fixed-bottom 則是頁面捲動後,還是會在原來的地方
navbar-inverse
跟navbar-default相對的另外一個樣式
要製作基本navbar的流程
首先先在nav element裡加上navbar,navbar-default的class
再來加上role="navigation",這是為了增加可讀性,有些人並不會用nav element來作navigation
然後加上一個div element,class為navbar-header,在這邊可以加上navbar-brand
裡面的選單則用ul element,class為nav,navbar-nav
若是要加上responsive的feature
則設計一個俗稱為hamburger button,加上navbar-toggle的class
這個button有幾個屬性要加,首先是data-toggle="button",告訴js要執行的動作
再來是data-target,選擇要折疊/切換的 element id
這個element id 裡面應該要有collapse,navbar-collapse的class,裡面包含隱藏的內容
最後附上一個網路的教學網站,內容相當豐富
http://www.tutorialspoint.com/bootstrap/