bootstrap小結(基礎 高階部分)

2021-10-06 22:48:50 字數 2558 閱讀 4456

11月23日

天氣:溫和 心情:還好 心態: 沒崩 (因為半天就可以回家了)

最近一周溫習了bootstrap的種種,基本算是搞完了。

附上今天隨手做的小練習:

[機試題.zip][1]

[1]:

還有乙個專案等著去做,所以先做乙個簡單些的bootstrap總結。具體如下:

叨叨半天了,正題:

1.首先是引入,這個不用說了,link。
2.其次是 js 的引入,由於我上官網查詢了一翻,發現 bt 的所有 js,外掛程式等等都是基於 jq 寫的,所以注意引入不管什麼外掛程式都要先引入 jq。
基於**查詢

3.row 為行,col 為列,乙個 row 中有 12 等份的 col,安排份數超過 12 行就換行。

預設居中

4.對應**查詢:

xs:超小螢幕(<768px)xs

sm:小螢幕(>=768px<992px)sm

md:中等螢幕(>=992px<1200px)md

lg:大螢幕(>=1200px)lg

5.row col 等份不能加小數點(親測)。

6.樣式因為是封裝好的,調整原始碼需要翻幾 w 甚至更多行**(具體沒看),所以我在測試階段就趕緊試了樣式微調,因為封裝的雖多,但是畢竟多的不一定就是你想要的,然後發現!樣式可控,簡單來說就是可以在行內樣式進行微調,最擔心的就是因為封裝的太多,怕微調後與其衝突,但是還好沒有,親測可行。但是影響了寬度。咳,具體自己在除錯一下。

7.offset 為偏移量,也就是向右偏移,其實也就是增加了左 margin,誰需要偏移直接在行內偏移。格式為:col-xx-offset-xx,第乙個 xx 為對應的寬度,第二個為偏移了幾份,還是以 12 為基準。

類名為 container 的盒子預設為居中占約 70% 的寬度,可以改為 container-fluid,為居中佔 95% 左右的寬度。

8.列巢狀式行內是列,列內不能是列,列內還得是行並且均分 12 份。

push 向右偏移,pull 向左偏移

9.**生成真的很好用,超級大的乙個**直接就生成了,關係式在腦子裡。

table 為**基礎類,必須寫,table-bordered:**邊框,table-striped:條紋狀(也就是隔乙個一條陰影),table-hover:也就是偽類的效果,顏色為暗灰色,親測可控,通過類名覆蓋。

按鈕都挺好玩的。

10.響應式:img-responsive:多大都得充滿父元素,邊框:img-rounded(圓角)img-circle(橢圓 =《個人感覺 border-rodius50%>)img-thumbnail(給加個框)。

也是讓我很驚嘆的部分:

1. 純css輪播圖
應該是利用了animation這個玩意,不過上手還是挺方便的。在使用方面主要利用了carouse,且配置好adcive和各個target元素。沒什麼難的。相比原生js的輪播簡直不要太方便。

2. 模態框,由於這個沒點技術難度,直接上例子了

**如下:

安全退出

×確定要退出應用嗎?

確定

取消

上面這個模態框通過對按鈕的繫結事件達到對模態框的控制效果,然後設定好模態框的內容就好,沒難度,略過

3. 展開閉合:
先上**:

顯示或隱藏

顯示或隱藏

上面這個是通過按鈕對內容展開閉合狀態,但是用到了well類名,我看了原始碼是個設定好的類名

data-toggle=「tooltip」 data-placement=「bottom」 title=「用於顯示和隱藏模態框」

靠這三個屬性來控制按鈕的提示,提示文字以及提示文字方向

5. 以及彈出框:依據工具提示的前提,加上data-content就成彈出框了。
絕對注意絕對注意的是工具提示與彈出框都需要 $(』[data-toggle=「tooltip」]』).tooltip();或 $(』[data-toggle=「popover」]』).popover();在js檔案中手動呼叫才能生效,第乙個為工具提示的呼叫**,第二個為彈出框的呼叫**

6. 滾動監聽:
依賴於導航元件,用於高亮顯示選中的鏈結。

ps:類名為icon-bar的span元素*3就是導航中常見的三道槓。

每個導選單項必須有乙個跳轉目標,與當前文件中的一些元素中id相匹配

為被監聽的元素設定相對定位,position-reative 但是大多時候監聽的是body元素。

ps:全域性禁過渡:

$.supprot.transtion=flase。

總結完了。

ps:好多小孩心性的人,可笑,看著他們宛如木偶般去做某些事,他們可能自己也不知道自己下個動作該做什麼吧,他們在感覺著我該怎麼做了而去怎麼做,而不是我現在應該做什麼而去做什麼,也不知道可悲還是可笑

Bootstrap 學習小結

一 bootstrap是什麼 bootstrap是當下非常經典且流行的前端框架 頁面工具集 很多公司的前後端專案都有整合bootstrap。特點 靈活簡潔,優雅,美觀大方。讓web開發變得更加迅速簡單。github 二 為什麼要使用bootstrap 1 bootstrap提供了一整套前後端 包括移...

Bootstrap入門基礎

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

bootstrap基礎學習

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