Bootstrap之CSS篇(5)

      網友投稿 916 2025-04-01

      本篇介紹了bootstrap響應式按鈕、圖片的使用方法,輔助類、響應式工具的使用,也算是對bootstrap全局CSS樣式的完結篇。

      按鈕

      可作為按鈕使用的元素

      -?```` -?```` ????-?``type="button"`` ????-?``type="submit"``

      按鈕類

      -?``.btn-default``??標準效果 -?``.btn-primary``??原始效果 -?``.btn-success``??成功效果 -?``.btn-info``?信息效果 -?``.btn-warning``??警示效果 -?``.btn-danger``???危險效果

      輔助類

      -?.active???點擊效果 -?.disapbled????禁用效果 -?.btn-link?鏈接效果 -?.btn-lg???尺寸:大按鈕 -?.btn-sm???尺寸:小銨鈕 -?.btn-xs???尺寸:超小按鈕 -?.btn-block????塊級按鈕????父元素內寬度拉伸100%

      創建按鈕實例

      ????

      btn?基礎樣式

      ???? ????btn?-?button按鈕 ????btn?-?a標簽 ????

      ????

      input按鈕?-?六種樣式

      ???? ???? ???? ???? ???? ???? ????

      ????

      button按鈕?-?六種樣式

      ????btn-default ????btn-primary ????btn-success ????btn-info ????btn-warning ????btn-danger ????

      ????

      ?a標簽按鈕?-?六種樣式??(輔助類效果演示)

      ????btn-default?(active) ????btn-primary?(disabled?-?1) ????btn-success?(disabled?-?2) ????btn-info?(btn-lg) ????btn-warning?(btn-sm) ????btn-danger?(btn-xs) ??

      按鈕小結:

      實現按鈕有三個標簽

      ????img-rounded

      ?????? ????
      ???? ????img-circle

      ?????? ????
      ? ????img-thumbnail

      ?????? ????
      ??

      圖片小結:

      在img引用.img-responsive類即可,非常簡單,用不著總結當輔助類使用就可以了

      img輔助類可以了解一下,主要是對圖片邊角進行修飾作用

      輔助類

      輔助類也叫工具類,在一些基礎類有時候需要一些輔助類來實現特定的效果

      文本顏色

      text-mutd

      text-primary

      text-success

      text-warning

      text-danger

      如果text-*類 在某些選擇器下無法生效,可嘗試將文本放在中再引用text-*類

      背景顏色

      bg-primary

      bg-success

      bg-info

      bg-warning

      bg-danger

      如果bg-*類 在某些選擇器下無法生效,可嘗試將文本放在

      中再引用bg-*類

      ????這是一個text-muted的文本效果

      ????這是一個text-primary的文本效果

      ????這是一個text-success的文本效果

      ????這是一個text-info的文本效果

      ????這是一個text-warning的文本效果

      ????這是一個text-danger的文本效果

      ????

      ????這是一個bg-primary的背景色效果

      ????這是一個bg-success的背景色效果

      ????這是一個bg-info的背景色效果

      ????這是一個bg-warning的背景色效果

      ????這是一個bg-danger的背景色效果

      ??

      快速浮動

      pull-left、pull-right工具類具備?!important屬性,不能用于導航條組件中(導航組件中有專用的工具類)

      .pull-left?左浮動

      .pull-right?右浮動

      Bootstrap之CSS篇(5)

      .clearfix?清除浮動

      內容居中

      .center-block?設置元素為block,并居中顯示

      顯示或隱藏

      .show?顯示元素,僅作用于塊級元素

      .hidden?隱藏元素,僅作用于塊級元素

      .sr-only?僅在閱讀器中顯示,其他設備上隱藏元素

      .invisible?僅影響元素的可見性,元素仍能影響文檔流的布局效果

      text-hide?隱藏文本

      特殊的按鈕

      關閉按鈕?

      三角符號?

      輔助類小結:

      輔助類的使用方法都相同,只要在class中引用即可

      注意有些效果需要在父元素中引用,這需要在以后的使用過程中慢慢去積累經驗

      也有一些效果因為選擇器的原因沖突,需要通過額外的

      來包裹引用類才能發揮作用

      響應式工具

      為了滿足不同設備展示布局效果,在某些特殊的情況下,我們可能針對不同的設備來獨立設計他們的頁面顯示內容,其中還包含了針對打印機顯示或隱藏的內容。我們完全可以為移動設備和電腦設備分別獨立的設計頁面。

      響應式工具類快速查詢表

      在柵格系統中我們可以通過這些類來控制不同設備中頁面的顯示內容

      柵格系統中的塊級效果應用

      從v3.2.0版本起,所有的.visible-*-*類都有三種塊級效果,分別對應display:block,display:inline,display:inline-block;

      以xs小屏幕設備為例,可以使用.visible-xs-block、.visible-xs-inline、.visible-xs-inline-block來設置元素的塊級屬性

      打印類

      與顯示和隱藏類一樣,只是這些類針對打印機做出了處理。

      我們對Bootstrap之CSS篇(2)中非常規布局示例代碼做一些小修改,除了xs最小設備第2列不顯示外,第1列在瀏覽器打印時也不顯示。

      ???? ????????1行1列?hidden-print?col-xs-4?col-md-4

      ????????1行2列?hidden-print?col-xs-4?col-md-8 ????????1行3列?hidden-print?col-xs-4?col-md-12 ???? ???? ????????2行1列?hidden-xs?col-sm-4 ????????2行2列?hidden-xs?col-sm-4 ????????2行3列?hidden-xs?col-sm-4 ???? ???? ????????3行1列?col-xs-4 ????????3行2列?col-xs-4 ????????3行3列?col-xs-4 ???? ??

      響應式工具小結:

      在我們熟悉了柵格系統后,通過這個響應式工具,我們可以設計更具特性的頁面效果

      只要掌握好了這些響應式工具的應用,在不同設備上展現不同的形式的網站都是十分容易的事情,但對美工設計人員是有一定要求,除了需要設計主版面外,還要提供過渡到各設備的頁面,對于過渡時的各頁面效果都是需要提前作出與設計才能保證效果。

      初期此響應式工具的掌握好它們的使用效果即可,如何在動態版式布局中發揮效果,還需要我們借鑒更多網站模仿練習。

      本篇的總結

      本篇介紹了Bootstrap響應式按鈕、圖片的使用方法,輔助類、響應式工具的使用,也算是對Bootstrap全局CSS樣式的完結篇。

      Bootstrap當然不止只有這點內容,它還提供非常漂亮與實用的組件供我們使用,當然這些我們后續逐步介紹。

      Bootstrap相關資源文件,已上傳至我的Gitee項目?https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap

      書山有路勤為徑,學海無涯苦作舟!!!

      zhoubo

      2020.9.21 at home

      Bootstrap

      版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。

      版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。

      標簽:bootstrap
      上一篇:pytorch topk()
      下一篇:智能定制家居數據分析和智能化決策如何應用?
      相關文章
      亚洲伊人久久大香线蕉AV| 亚洲国产精品美女| 久久精品a亚洲国产v高清不卡 | 91丁香亚洲综合社区| 亚洲精品成人av在线| 亚洲综合色婷婷七月丁香| JLZZJLZZ亚洲乱熟无码| 国产亚洲欧美在线观看| 亚洲精华国产精华精华液| 99热亚洲色精品国产88| 亚洲欧洲春色校园另类小说| 亚洲国产日韩女人aaaaaa毛片在线 | 亚洲制服丝袜一区二区三区| 亚洲成a人片毛片在线| 亚洲国产精品美女| 日本亚洲免费无线码| 亚洲男人的天堂久久精品| 国产午夜亚洲精品国产| 中文字幕 亚洲 有码 在线| 亚洲精华国产精华精华液| 亚洲AV无码乱码精品国产| 亚洲乱码中文字幕手机在线 | 亚洲伦理一二三四| 亚洲欧洲日韩极速播放| 亚洲日韩AV无码一区二区三区人| 亚洲日韩亚洲另类激情文学| 亚洲AV无码男人的天堂| 亚洲国产精品成人一区| 亚洲中文字幕无码永久在线| 亚洲av无码一区二区三区乱子伦| 亚洲性天天干天天摸| 亚洲伊人久久大香线蕉影院| 国产 亚洲 中文在线 字幕| 亚洲aⅴ无码专区在线观看春色 | 亚洲最新黄色网址| 色天使亚洲综合在线观看| 精品无码专区亚洲| 久久精品国产精品亚洲人人 | 亚洲成a∧人片在线观看无码| 亚洲成人影院在线观看| 亚洲精品狼友在线播放|