前面的文章算是把bootstrap css部分簡單的學習了一遍,應該忽視了比較多的細節問題。不過大部分的內容我都過了一遍,並且用**實現了一遍,而且看到了真實的效果。挺不錯的。那麼接下來的幾篇文章主要來講解bootstrap的元件。那麼本文主要來講解以下內容
1.下拉列表
2.按鈕組
3.按鈕式下拉列表
4.總結
再來熟悉一下這個開始建立乙個頁面的**,首先新建乙個測試網頁加入如下**
複製**
**如下:
bootstrap
...
...
通過樣式類.btn-lg、 .btn-sm、.btn-xs來控制按鈕的大小。
向上彈出式選單
給父元素新增.dropup就能使觸發的下拉列表在元素上方。
複製**
**如下:
總結本文主要學習了按鈕和下拉列表,然後是對於按鈕和下拉列表的組合,變化還是蠻多的,樣式也不錯,但是開始使用還是沒那麼方便,因為這裡的介紹並沒有那麼詳細,學習起來還是有點費勁的。不過沒關係,自己多多的實踐就可以了,慢慢的領悟吧。
本文標題: bootstrap3.0學習筆記之按鈕與下拉列表
本文位址:
Bootstrap3 0學習筆記之CSS相關補充
1.瀏覽器支援 2.3.響應式工具 4.遇到的問題 5.總結 瀏覽器支援 bootstrap的目標是在最新的桌面和移動瀏覽器上有最佳的表現,也就是說,在較老舊的瀏覽器上可能會導致某些元件表現出的樣式有些不同,但是功能是完整的。被支援的瀏覽器 特別注意,bootstrap堅決支援這些瀏覽器的最新版本 ...
bootstrap學習筆記
學習 然後對bootstrap進行引用 柵格系統中,列數是12,行數不固定 例項 手機 平板 桌面 在上面案例的基礎上,通過使用針對平板裝置的 col sm 類,我們來建立更加動態和強大的布局吧。col xs 12 col sm 6 col md 8 col xs 6 col md 4 col xs...
bootstrap學習筆記
1 引入的檔案 script script 2 柵格系統布局 bootstrap把頁面設定為12列,通過改變列的數字來進行布局。col xs 4 指小於768px的小裝置 11 col sm 4 指 768px的裝置 22 col md 4 指 992px裝置 33 col lg 4 值1200px...