天天看點

bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條

bootstrap 的學習非常簡單,并且它所提供的樣式又非常精美。隻要稍微簡單的學習就可以制作出漂亮的頁面。

bootstrap提供了三種類型的下載下傳:

-------------------------------------------------------------

用于生産環境的 bootstrap

  編譯并壓縮後的 css、javascript 和字型檔案。不包含文檔和源碼檔案。

bootstrap 源碼

  less、javascript 和 字型檔案的源碼,并且帶有文檔。需要 less 編譯器和一些設定工作。

sass

  這是 bootstrap 從 less 到 sass 的源碼移植項目,用于快速地在 rails、compass 或 隻針對 sass 的項目中引入。

------------------------------------------------------------

其實我們不用下載下傳bootstrap也可以使用它:

bootstrap 中文網 為 bootstrap 專門建構了自己的免費 cdn 加速服務。基于國内雲廠商的 cdn 服務,通路速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。

base.html

bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條

 base.html中已經引入了bootstrap,将其儲存,我們就可以使用bootstrap提供的樣式了。

bootstrap預設提供了二百多個圖示。我們可以通過span标簽來使用這些圖示:

bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條

  <button></button>标簽用于建立按鈕,bootstrap提供了豐富的按鈕樣式。

bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條

   按鈕除了有預設的大小外,bootstrap還提供三個參數來調整按鈕的大小,分别是:btn-lg、btn-sm和btn-xs。

bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條

  下拉菜單是最常見的互動之一,bootstrap提供了漂亮的樣式。

bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條

  通過<input></input>标簽去建立輸入框。

bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條

  導航欄作為整個網站的指引必不可少。

bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條

  人與系統之間資料的傳遞都需要依靠表單來完成。比如注冊/登入資訊的送出,查詢條件的送出等。用<form></form>标簽來建立表單。

bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條

  警告框是系統向使用者傳達資訊和提供指引的重要手段。沒有針對警告框的标簽,通過bootstrap所提供的樣式可以瞬間制作出漂亮的警告框。

bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條

  系統的處理過程往往需要使用者等待,進度條可以讓使用者感覺到系統的處理過程,進而增加容忍度。

bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條
bootstrap精簡教程字型圖示按鈕下拉菜單輸入框導航欄表單警告框進度條

===========結束===========

1、我覺得前端更像是藝術,人們對美好的東西從來不會産生分歧。前端更像是通過技術展示美好。

2、前端技術的學習是所見即所得,你可以任意的修改标簽及其屬性,并且立馬看到修改後的效果。

3、對于bootstrap來說,标簽最重要的屬性就是class,因為使用的不同的class屬性值,可以使你的标簽樣式顔色發生變化。

繼續閱讀