close

<表單>

有三種佈局可選
1.垂直(默認) 2.內聯 3.水平

表單製作(垂直、一般向表單)
Step 1. 
#在form 內追加一個屬性 role="form"
<form role="form"> 
Step 2. 
#再開始表單之前追加div  #獲得最佳間距必要的
<div class="form-group">
Step 3. 
#所有可以輸入文字的例如 input 、 textarea 、select 追加
<calss=".form-control">

表單製作(內聯,也就是並排的)
Step 1.
#form 內追加class=".form-inline"
<form role="form" class="form-inline">
#追加class=".sr-only" 可隱藏內聯表單的標籤

<按鈕>

class 追加 
.btn-lg   按鈕會比較大
.btn-sm   按鈕會比較小
.btn-xs   按鈕會超級小
.btn-block 會跟隨父元素的寬度
#重要追加
按鈕class 只要有追加active
代表是按下去的圖案
有屬性 disabled="disabled" 不能按的按鈕
#下拉式按鈕選單~
一定要在<div class="btn-group"></div>內
然後先預設一個按鈕當作預設選項
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">我是預設喲</button>
<span class="caret"></span>
#caret是倒三角型的下拉圖案
最後就是 <ul class="dropdown-menu" role="menu">...</ul>


<圖片>

img-rounded   產生圓角狀態
.img-circle    把圖片變成圓形狀態
.img-thumbnail 建立一個邊框 有padding的效果
響應式的圖片 .img-responsive 有關這個的
#########導航  (最上方類似W3C有那種JAVA OR RUBY那樣的選項 )
在要變成導航的UL上添加
<class="nav nav-tabs">   ###這個是標籤化的導航變成類似長方形
在li內加上<class="active"> 那一個li會變成預設

膠囊式的就是比較像按鈕了
只要把 nav-tabs 替換城nav-pills就可以了
追加 nav-stacked 的話會變成垂直方式

追加 nav-justified 兩端對齊
想要禁用的話 在他的li上追加disabled

下拉式就比較複雜點 
從有.nav 的序列(UL)開始
追加 看是要標籤還是膠囊
需要有下拉的LI 加上dropdown 
接下來按他開啟的li加上dropdown-toggle (calss)
data-toggle="dropdown"

要顯示跑出來的下拉 ul追加dropdown-menu


arrow
arrow
    全站熱搜

    kagari023 發表在 痞客邦 留言(0) 人氣()