找回密码
 立即注册
搜索
热搜: Excel discuz
查看: 3446|回复: 0

bootstrap常用类名

[复制链接]

492

主题

7万

元宝

77万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
770449
发表于 2022-5-7 13:35:06 | 显示全部楼层 |阅读模式
为了方便快速开发,小结常用bootstrap类名,熟练记忆
  • 栅格类:
    col-xs/sm/md/lg-* 列,占据母元素的几份
  • 表单<form>
    form-inline 行内表单
    form-group 表单组
    form-control 表单控件
    has-warning/error/success 显示状态
  • 按钮
    btn基本样式
    btn-default/primary/success/info/warning/danger  其他按钮样式
    btn-lg/md/sm/xs 按钮大小
    btn-block 块级按钮,拉伸至父元素100%的宽度
  • 按钮组
    btn-group 按钮组,里面放置一系列button
    btn-toolbar 按钮工具栏,里面放置几组btn-group
    btn-group-xs/sm/md/lg 按钮组的大小样式
    btn-group-vertical 垂直按钮组
  • 导航
    nav 基本导航
    nav-tabs 标签式导航菜单
    nav-pills 胶囊式导航菜单
    nav-stacked胶囊垂直对方
    nav-justified 导航自适应

  • 导航栏
    navbar 导航栏基本样式
    navbar-default 默认样式
    navbar-header 导航栏头
    navbar-brand 导航栏头里面的导航牌
    nav navbar-nav 为了向导航栏添加链接,只需要在无序列表添加这两个类
    navbar-left/right左/右对齐
    navbar-form 导航中的form表单
  • 面板
    panel 基础面板
    panel-default/primary/success/info/warning/danger 其他面板
    panel-heading 面板头部
    panel-title 面板标题
    panel-body 面板内容
    panel-footer 面板脚注
  • 表格
    table 表格基本样式(只有横向分隔线)
    table-striped 条纹表格
    table-bordered 边框
    table-hover 悬停
    table-condensed 更加紧凑
    active/success/info/warning/danger 来改变tr/th/td背景颜色
    table-responsive 响应式表格

  • 其他:
    container 容器
    row 行
    small 小
    text-muted 文本静音
    well 上下左右有个padding
    pagination 分页
    pager 翻页
    disabled 禁用
    active 活跃
    breadcrumb 面包屑
    label 标签
    label-success/info/warning/danger 标签其他样式
    badge 徽章
    alert弹出提示
    alert-success/info/warning/danger其他弹出样式
    list-group 列表组
    list-group-item 列表项



作者:深度剖析JavaScript
链接:https://www.jianshu.com/p/004b70c93860
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|五花八门论坛 ( 豫ICP备15031300号-3 )

GMT+8, 2024-12-22 02:08 , Processed in 0.064198 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表