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 小螢幕 螢幕...