bootstrap該怎麼學習一般按什麼步驟我看到它的

時間 2021-10-14 20:40:52

1樓:匿名使用者

建議一般先學會排版佈局吧。這個是最最有用的。從最基本的bootstrap框架開始學習。

首頁上的其他一些都是擴充套件性的框架可以先不學。等完全瞭解了bootstrap基本的一些排版佈局以及樣式,學習其他的也就不難了。其實bootstrap學習起來還是很簡單的吧。

佈局的話就是百分比佈局和柵欄式佈局為主。其他的類似 按鈕 .btn 報錯提示 .

alert-block 都是利用了組合式的class如 。.btn .btn-success就是綠色按鈕。.

btn+字尾(其實就是一個色系)。個人任為bootstrap最強大的一點就是組合式class,隨心搭配。從排版佈局到css最後到bootstrap.

js(個人認為使用的機率不大,相容性和實用性並不是最好。js初學者用用很不錯。常用的也就那幾個,畢竟萬惡的ie在國內還是根深蒂固的)按照這個步驟看完,再自己做一些小的demo很快上手的。

祝你學習順利。

2樓:匿名使用者

建議你學習bootstrap2吧, bootstrap3 的跨對比較大,但是功能也強大,但是沒有2 版本穩定。

學習bootstrap2 就是為了快速開發,如果學習3將會很難。

如何學習bootstrap框架

3樓:在晴天的雨傘

全域性樣式

1bootstrap 中用到一些 html元素和css屬性需要將頁面設定為 html5 文件型別,即在頁面頂部新增「」

2佈局容器:bootstrap 需要為頁面內容和柵格系統包裹一個 .container或container-fluid(佔據全部視口viewport的容器)容器。

3柵格系統,bootstrap 提供了一套最多12列的流式柵格系統,通過 .row表示行 和 .col-xs-4 這種表示寬度的列快速建立柵格佈局。

4bootstrap 排版、連結樣式設定了基本的全域性樣式。

font-size 設定為 14px,line-height 設定為 1.428。

(段落)元素還被設定了等於 1/2 行高(即 10px)的底部外邊距(margin)。

基礎樣式

【排版】,

1. 標題,可以用來.h1 到 .h6 類給內聯屬性的文字賦予標題樣式,標題內通過標籤或帶.small 類的元素標記副標題。

主體文字:.lead 類讓段落突出顯示。

2. 內聯文字,使用標籤表示標註文字,刪除,無用,插入,下劃線,小號(父容器字型大小的 85%),著重,斜體。

3. 文字對齊類,text-left,text-center,text-right,text-justify,text-nowrap

4. 文字大小寫類,text-lowercase,text-uppercase,text-capitalize

5. 縮略語類,為 元素設定 title屬性並使用.initialism 類讓 font-size 變得稍微小些。例:attr

6. 地址,以日常使用的格式呈現,在行結尾加

保留需要的樣式即可。

7. 引用,將 html 元素包裹在 中即可表現為引用樣式。對於直接引用,建議用 標籤。

8. 列表,list-unstyled類移除預設 list-style 樣式和左側外邊距的一組元素(只針對直接子元素)。list-inline類通過設定 display:

inline-block; 並新增少量的內補(padding),將所有元素放置於同一行。dl-horizontal類讓 內的短語及其描述排在一行。

【**】

標籤包裹內聯樣式的**片段,

標籤標記使用者通過鍵盤輸入的內容,

展示**塊 。可用pre-scrollable 類設定最高350px帶垂直滾動條。

標籤標記變數,

標籤標記程式輸出的內容。

【**】

.table 類指定基本樣式,

.table-striped 條紋樣式,

.table-bordered 類為邊框樣式,

.table-hover 類帶滑鼠懸停樣式,

.table-condensed 類緊湊樣式。

狀態類(行或單元格設定顏色):active,success,info,warning,info。

將任何 .table 元素包裹在 .table-responsive 元素內,即可建立響應式**,其

響應式**: 會在小螢幕裝置上(小於768px)水平滾動。當螢幕大於 768px 寬度時,水平滾動條消失。

【表單】

1. 基本例項,所有設定了 .form-control 類的 、和 元素都將被預設設定寬度屬性為 width:

100%;。 將 label 元素和前面提到的控制元件包裹在 .form-group 中可以獲得最好的排列。

不要講表單組直接和輸入框組混合使用。建議將輸入框組巢狀到表單組中使用。

form-group,input-group,control-group,

2. 內聯表單,元素新增 .form-inline 類可使其內容左對齊並且表現為 inline-block 級別的控制元件。

只適用於視口(viewport)至少在 768px 寬度時(視口寬度再小的話就會使表單摺疊)。

在內聯表單中單選/多選框控制元件的寬度設定為 width: auto;

如果你沒有為每個輸入控制元件設定 label 標籤,螢幕閱讀器將無法正確識別。對於這些內聯表單,你可以通過為label 設定 .sr-only 類將其隱藏。

3. 水平排列的表單

通過為表單新增 .form-horizontal 類改變 .form-group 的行為,使其表現為柵格系統中的行(row)

4. 多選和單選框

.radio、.radio-inline、.checkbox、.checkbox-inline 。

5. 靜態控制元件

水平佈局的表單中,如需將一行純文字和 label 元素放置於同一行,為 元素新增 .form-control-static類即可。

6. 控制元件狀態

.disabled類禁用控制元件,為設定disabled 時則禁用包含的所有控制元件。

a標籤不受此類影響。

readonly 屬性可以禁止使用者輸入

.has-warning、.has-error 或 .

has-success 類到這些控制元件的父元素即可。任何包含在此元素之內的 .control-label、.

form-control 和 .help-block 元素都將接受這些校驗狀態的樣式。

你還可以針對校驗狀態為輸入框新增額外的圖示(注意依賴於label標籤)。只需設定相應的 .has-feedback 類並新增正確的圖示即可。

7. 控制元件尺寸

通過 .input-lg .input-sm類似的類可以為控制元件設定高度,通過 .col-lg-* 類似的類可以為控制元件設定寬度

通過新增 .form-group-lg 或 .form-group-sm 類,為 .form-horizontal 包裹的 label 元素和表單控制元件快速設定尺寸。

用柵格系統中的列(column)包裹輸入框或其任何父元素,都可很容易的為其設定寬度。

8. 輔助文字

help-block類,針對表單控制元件的「塊(block)」級輔助文字。

【按鈕】

1. 基本樣式,btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active

2. 展現形式,btn-link、btn-block、close

3. 尺寸樣式,.btn-lg、.btn-sm 、.btn-xs 。

可通過 、或 元素應用按鈕類,但建議用 元素來獲得在各個瀏覽器上獲得相匹配的繪製效果。

6【**】

**形狀,img-rounded,img-circle,img-thumbnail,ie8 不支援 css3 中的圓角屬性。

7【輔助】

text-muted、text-primary、text-success、text-info、text-warning、text-danger

bg-primary、bg-success、bg-info、bg-warning、bg-danger、

三角符號,caret

浮動居中

元件樣式

【圖示】

200個來自 glyphicon halflings 的字型圖示,

圖示類只能應用在空元素上,且不可與其它元件聯合使用。

4樓:

建議一般先學會排版佈局吧。這個是最最有用的。從最基本的bootstrap框架開始學習。

首頁上的其他一些都是擴充套件性的框架可以先不學。等完全瞭解了bootstrap基本的一些排版佈局以及樣式,學習其他的也就不難了。其實bootstrap學習起來還是很簡單的吧。

佈局的話就是百分比佈局和柵欄式佈局為主。其他的類似 按鈕 .btn 報錯提示 .

alert-block 都是利用了組合式的class如 。.btn .btn-success就是綠色按鈕。.

btn+字尾(其實就是一個色系)。個人任為bootstrap最強大的一點就是組合式class,隨心搭配。從排版佈局到css最後到bootstrap.

js(個人認為使用的機率不大,相容性和實用性並不是最好。js初學者用用很不錯。常用的也就那幾個,畢竟萬惡的ie在國內還是根深蒂固的)按照這個步驟看完,再自己做一些小的demo很快上手的。

祝你學習順利。

5樓:碼工具

bootstrap3 教程

bootstrap4 教程

html中怎麼新增bootstrap中的圖示

bootstrap 中包含的檔案有 bootstrap css bootstrap.css bootstrap.min.css js bootstrap.js bootstrap.min.js img glyphicons halflings.png glyphicons halflings whi...

我該怎麼學習,我們應該怎麼學習?

景書琴 學習效率是決定學習成績的重要因素。那麼,我們如何提高自己學習效率呢?第一點,要自信。很多的科學研究都證明,人的潛力是很大的,但大多數人並沒有有效地開發這種潛力,這其中,人的自信力是很重要的一個方面。無論何時何地,你做任何事情,有了這種自信力,你就有了一種必勝的信念,而且能使你很快就擺脫失敗的...

我該怎麼學習,我應該怎麼學習

積極的學習,什麼都學會了,看你在意不在意,為什麼有些人總是迷戀網路遊戲,為什麼有些人總是反感學習。為什麼不用迷戀網路遊戲的精神投入到學習中呢,迷戀學習呢。其實很簡單,因為對網路產生了興趣,對學習沒有產生興趣,人總是在意那些感興趣的事,對待學習的困難不用在意,放心的學下去,要在意學習中的快樂,這樣你的...