Bootstrap - component

358 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
358
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bootstrap - component

  1. 1. BOOTSTRAP-COMPONENTS
  2. 2. AGENDA  Dropdowns  Button groups  Button dropdowns  Navs
  3. 3. font-size DROPDOWNS 要呈現的ul li 必須包含於 dropdown 的class中 或是 定義 position:relative中 <div class="dropdown"> <ul class="dropdown-menu" style="display: block;"> <li> <a href="#">Action</a></li> <li> <a href="#">Another action</a></li> <li> <a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
  4. 4. font-size BUTTON GROUPS 一維按鈕組,btn-group: 多維按鈕組,btn-toolbar: 垂直按鈕組,btn-group-vertical:
  5. 5. font-size BUTTON DROPDOWN MENUS 按鈕式下拉選單,將下拉選單dropdown-menu,置於btn-group 中,並設定按鈕class為dropdown-toggle、加入data-toggle屬性 按鈕分列式下拉選單,左邊是單純的按鈕,右邊是按鈕式下拉選 單 按鈕向上彈出式選單,dropup
  6. 6. font-size .table-striped NAVS 基本導航頁: 於ul 加入 .nav-tabs pills: 相同於基本導航的結構,但加入的是 .nav-pills 堆疊式導航頁: 對於上面兩種橫向導航頁,再加入.nav-stacked 結合下拉選單: 需搭配data-toggle=“dropdown” 的 JavaScript 導航列表: 使用.nav .nav-list 灰色標頭 .nav-header 分隔線 .divider

×