Bootstrap基礎學習

2022-10-06 18:42:07 字數 1229 閱讀 6383

bootstrap是乙個基於柵格結構的前端結構框架(當然也有js,jquery),它的優點是內容框架能夠迅速搭建起來,基於媒介查詢可以使搭建的頁面迅速的適應不同的使用者端,無論是手機,平板,還是pc,基本上都能自適應,當然新版本已經開始不支援ie6了,對ie8的支援也很有限,畢竟ie8對html5的支援不太好,(說實話,我自己也不喜歡ie6~8,對於我這種初級選手來說,相容性有時候真費勁,不僅專案上要用,連面試也要用,有沒有搞錯嘛,遇到了,上網查一下不就行了。發個牢騷,該會的還是得會啊!!!)

閒言碎語不多講,開始總結自己這段時間bs筆記!

1.在結構內容方面,bs對結構內容的控制基本是有類來控制,比如對結構的控制就是

這一塊div的類名中,是由col-md-4,col-xs-6這兩個類名來控制他的框架寬度;其中col代表是柵格,md代表客戶端顯示器的寬度程式設計客棧為pc中屏,同樣的xs則代表客戶端顯示器為超小屏,也就是手機屏;4,6就代表了柵格的長度,意思就是在中屏顯示器下寬度為4個柵格,在手機端寬度為6個柵格 ,一般情況下把把一整塊div最多可以劃成12個柵格,所以他的兄弟div在中屏下則是8個柵格!

這一塊div的類名中,拋去col-md-8不說,來說說text-muted.這個類則是控制這個div下的內容字型顏色的,當你把bs的css**到本地後,你在css我檔案中搜尋text-muted,就會看到他的定義只有顏色,和他在一起的其他類名就分別定義了不同的顏色

2.結構上面說完了,那就說說頁面中具體的一些元件,先說說導航吧,原先我們自己製作導航是由乙個基本的內聯ul組成(以下css在bs中可以實現),

但在bs中,則有n**這個類來實現,但是n**這個類需要和其他類合用才能讓頁面效果發揮出來,譬如說n**-pills和n**-tabs,如果是垂直導航的話則在類名中加入n**-stacked

3.說完導航條再來說說下拉列表,bs中的下拉列表得依靠它自帶的乙個js檔案來實現,而它本身的js還依靠www.cppcns.com了jquery,所以這兩個檔案是必備的。值得說明的是關於這個下拉列表**方面有點複雜,button中的data-toggle="dropdown"必須和外層的div類名相同。

suhqeovolwdby="dropdownmenu1">

4.貌似該說說表單了,在bootstrap框架中,通過定製了乙個類名`form-control`,也就是說,如果這幾個元素使用了類名「form-control」,將會實現一些設計上的定製效果。

本文標題: bootstrap基礎學習

本文位址: /ruanjian/j**a/126526.html

bootstrap基礎學習

簡潔 直觀 強悍的前端開發框架,讓web開發更迅速 簡單。常用 哦,還有bootstrap是基於jquery的,所以之前要先引入jquery 1.bootstrap把螢幕分成四個狀態 1 lg 大螢幕 螢幕寬度大於1200px 2 md 中等螢幕 螢幕寬度992 1200px 3 sm 小螢幕 螢幕...

Bootstrap學習筆記1 基礎

固定寬度 100 內容排版的標籤 36px 30px 3 24px 4 18px 5 14px 12px page header 設定頁頭,給標題加一條分隔線 副標題,小一號 副標題,大一號 推薦使用的加粗 推薦使用的傾斜 推薦使用的刪除 文字對齊方式 text left 左對齊 text righ...

Bootstrap入門基礎

最近需要做乙個簡單的web頁面。考慮到前端經驗不足,為了快速產出,同時專案只是乙個工具,對專案沒有什麼要求,所以我選擇了bootstrap這個框架作為web框架。寫從零 學習 bootstrap 的初衷 讓我們先從bootstrap的最簡單的模板開始 讓我們一行行的來看 我用 代表解釋 代表這是ht...