bootstrap(5)

1图片样式


Paste_Image.png
Paste_Image.png

响应式图片 img-responsive,呈现效果img-rounded img-circle img-thumbnail,居中center-block

2标题样式


Paste_Image.png

下划线标题 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

  • 让内容块网页居中: <div class="center-block"></div>

4下拉菜单


  • dropdown: 将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)
  • data-toggle:下拉菜单触发器(取值为 dropdown)
  • dropdown-menu:给ul指定下拉菜单的样式
  • dropup:向上弹出的菜单(下拉菜单父元素)
  • divider:为下拉菜单添加分割线
  • disabled:禁用的菜单项
Paste_Image.png
Paste_Image.png

5按钮组


  • btn-group:按钮组(可以实现将一组按钮放在同一行)
  • 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,056评论 0 66
  • CSS全局样式 概览 移动设备优先 布局容器 1、container类用于固定宽度并支持响应式布局的容器 2、co...
    VEN_64d6阅读 1,440评论 0 1
  • 一.文本1)对齐方式text-left 文本左对齐 =======> text-align:...
    lovelydong阅读 2,385评论 0 7
  • 战略就是生存 战略就是预见 战略就是理念 战略就是航海图 战略就是找魂 战略就是竟合 战略就是破局 ——王志纲工作...
    吴鹏自远方阅读 638评论 0 1
  • 看完阅兵,只有一个感觉,空谈十句、宣传百句、渲染千句的爱国,都不如呈现一次,能够激发国人民族自豪感的事件来得实际。...
    点墨闻香阅读 290评论 0 0