bootstrap(5)

1圖片樣式


Paste_Image.png
Paste_Image.png

響應(yīng)式圖片 img-responsive,呈現(xiàn)效果img-rounded img-circle img-thumbnail,居中center-block

2標(biāo)題樣式


Paste_Image.png

下劃線標(biāo)題 page-header

3輔助類樣式


  • 文本顏色類: text-muted(柔和的) 、text-primary 、text-success 、text-info 、text-warning 、text-danger

  • 背景顏色類: bg-primary bg-success bg-info bg-warning bg-danger

  • 三角符號: <span class="caret"></span>

三角符號.png
  • 快速浮動類:pull-left pull-right

  • 清除浮動:為父元素添加clearfix

  • 讓內(nèi)容塊網(wǎng)頁居中: <div class="center-block"></div>

4下拉菜單


  • dropdown: 將下拉菜單觸發(fā)器和下拉菜單包含在其中(下拉菜單父元素)
  • data-toggle:下拉菜單觸發(fā)器(取值為 dropdown)
  • dropdown-menu:給ul指定下拉菜單的樣式
  • dropup:向上彈出的菜單(下拉菜單父元素)
  • divider:為下拉菜單添加分割線
  • disabled:禁用的菜單項
Paste_Image.png
Paste_Image.png

5按鈕組


  • btn-group:按鈕組(可以實現(xiàn)將一組按鈕放在同一行)
  • btn-toolbar:按鈕組工具欄(將多個按鈕組放在其中)
  • 按鈕組的尺寸:btn-group-lg btn-group-sm btn-group-xs
  • btn-group-verticle:垂直排列的按鈕組
Paste_Image.png
Paste_Image.png

6按鈕式下拉菜單


Paste_Image.png
Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第5章 菜單、按鈕及導(dǎo)航 一、下拉菜單 小伙伴們注意,在Bootstrap框架中的下拉菜單組件是一個獨立的組件,根...
    凜0_0閱讀 5,308評論 0 66
  • CSS全局樣式 概覽 移動設(shè)備優(yōu)先 布局容器 1、container類用于固定寬度并支持響應(yīng)式布局的容器 2、co...
    VEN_64d6閱讀 1,528評論 0 1
  • 一.文本1)對齊方式text-left 文本左對齊 =======> text-align:...
    dxxwdong閱讀 2,444評論 0 7
  • 戰(zhàn)略就是生存 戰(zhàn)略就是預(yù)見 戰(zhàn)略就是理念 戰(zhàn)略就是航海圖 戰(zhàn)略就是找魂 戰(zhàn)略就是竟合 戰(zhàn)略就是破局 ——王志綱工作...
    吳鵬自遠(yuǎn)方閱讀 709評論 0 1
  • 看完閱兵,只有一個感覺,空談十句、宣傳百句、渲染千句的愛國,都不如呈現(xiàn)一次,能夠激發(fā)國人民族自豪感的事件來得實際。...
    點墨聞香閱讀 385評論 0 0

友情鏈接更多精彩內(nèi)容