使用bootstrap做一些小的例子, 如果光靠看一些知識點, 是沒有辦法快速的去學習一些知識的. 這里講解怎么去做一個簡單的登錄案例. Let's go!
工具/原料
-
bootstrap框架.
-
文本編輯器(這里隨意, 不過推薦使用帶有語法高亮的編輯器, 寫代碼比較方便, 還容易找錯誤)
方法/步驟：
1、前面的內容已經告訴我們怎么使用一個Bootstrap的基礎模版, 然后我們這個實例也是按照之前的那個基礎模版修改增進過來的. 然后先看效果圖, 他的好處是, 你可以寫一個頁面, 在不同的設備上都實用. 只需要使用定義好的class樣式, 當然這個樣式一樣自己可以去寫這個.
2、看一下具體的代碼. 這里需要注意的是, 那個模版, 是在系列教程一中.class="container" 讓頁面能夠做到居中.注意該標簽不能嵌套使用. role屬性是html5中新增的一個屬性,可以讓你更好的自定義一些屬性供你使用.class="form-control" 該標簽是把一些表達標簽的width都設置為100%. 其中btn是bootstrap中默認定義的一個button也就是按鈕的樣式. 其中btn-lg是指最大的樣式.還有btn-xs, btn-sm, btn-md. 分別對應不同的設備. 手機, 平板, pc等.
3、這里需要重新寫了2個樣式, 一個是表單的最大width. 設置成了330px.是因為登錄不需要太過寬, 要不然不太好看. 第二個樣式, 是因為在默認的btn-lg是占一行, 所以, 就會把兩個表單文本框放在各自的行上. 但是緊挨着太狠. 所以, 做了一個3px的下間距.
4、不同的btn大小展示, 從圖中就可以看出來這幾個的區別.
<button class="btn btn-lg btn-primary btn-block" type="submit">登錄</button> <button class="btn btn-xs btn-primary btn-block" type="submit">登錄</button> <button class="btn btn-sm btn-primary btn-block" type="submit">登錄</button> <button class="btn btn-md btn-primary btn-block" type="submit">登錄</button>
5、學習bootstrap之前, 最起碼你要有html, css,和一些js的基礎知識, 因為該框架也是在這些基礎上做出來的預定義的效果而已. 上面的有一定的基礎. 學習這個事半功倍.