背景颜色 bg-primary 字体颜色 text-primary
文字居中 text-center
按钮 btn btn-primary btn-default默认 btn-link链接 按钮大小 默认md btn btn-lg/sm/xs 输入框大小 input-lg/sm/xs 状态 active/disabled 框 alert alert-primary
面板
面板框架 panel panel-primary 面板标题 panel-heading 面板主体 panel-body 面板脚步 panel-footer
<div class="panel panel-primary center"> <div class="panel-heading"> <h4 class="center">我是面板的标题</h4> </div> <div class="panel-body center"> <span class="text-primary center">我是面板的主体</span> </div> <!-- 按钮默认行内样式display:inline-block btn-block使其变为块级 --> <div class="btn btn-primary">我是面板的按钮</div> <div class="panel-footer center">我是面板的脚部</div> </div>表单
form-group form-control 使label与表单换行对齐
按钮 input button a btn-group 按钮组 将多个按钮变为一个整体 btn-group-justified 根据父容器的宽度自适应大小 端点对齐(适用于a) 如果是input/button则须给各个元素加个class为btn-group的父级元素
btn-group-vertical 将横向的按钮组改为纵向
大小 btn-group-lg/sm/xs
下拉菜单
属性 data- 用于与js交互的触发器 data-toggle="dropdown"切换 aria- role- 对于特殊人群的应用 aria-haspopup 屏幕阅读器读到此处 提示是否弹出下面菜单 aria-expanded是否展开状态 role 描述当前状态
<!-- 下拉菜单箭头图标caret(默认向下) 不适用于input --> <a class="btn btn-primary">a按钮<span class="caret"></span></a> <!-- 向上箭头 在父级上加上dropup --> <!-- 向下箭头 在父级上加上dropdown --> <div class="group dropup"> <button>按钮<span class="caret"></span></button> </div>在下拉菜单的列表类中添加类名dropdown-menu-right使其右浮动 -->btn-block 与父级同宽dropdown-header相当于label divider加上分割线
<!-- 在父级类中加上名open使下拉列表显示 --> <!-- class="dropdown"必须 使菜单列表向下显示 dropup使菜单列表向上显示 --> <div class="dropdown"> <!-- data-target=".dropdown"同时控制一个或多个的行为 --> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> <!-- data-toggle="dropdown"必须 --> Dropdown <span class="caret"></span> </button> <!-- 在下拉列表类中添加类名dropdown-menu-right使其右浮动 --> <!-- btn-block 与父级同宽 --> <!-- dropdown-header相当于label divider加上分割线 --> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <!-- text-center使文字居中 --> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="text-center">Separated link</a></li> </ul> </div>
转载于:https://www.cnblogs.com/dreamerC/p/6208081.html
