布局容器
.container 固定宽度
.container-fluid 全屏
.row 行
.col-lg- 大屏幕
.col-md- 中屏幕
变量
@grid-columns: 12 列数
@grid-gutter-width: 30px 槽宽
@grid-float-breakpoint: 768px 媒体查询阙值(确定合适让列浮动)
中心内容
.lead 段落突出显示
内联文本元素
<mark></mark> 改变包含内容背景色
<del></del><s></s> 删除线
<ins></ins><u></u> 下划线
<small></small> 小号文本
<strong></strong><b></b> 加粗
<em></em><i></i> 斜体
文本对齐
.text-left 靠左
.text-center 居中
.text-right 靠右
.text-justify 文本对齐
.text-nowrap 不自动换行
.text-lowercase 文本小写
.text-uppercase 文本大写
.text-capitalize 首字母大写
引用
<blockquote></blockquote> 引用
blockquote.blockquote-reverse 引用右对齐
列表
.list-unstyled 移除默认样式
.list-inline 所有列表放同一行
.dl-horizontal 设置了浮动和偏移,水平排列
代码
<code></code> 包裹内联样式的代码片段
<kbd></kbd> 标记用户通过键盘输入的内容
.pre-scrollable 使 <pre> 元素可滚动,代码块区域最大高度为340px
变量
<var></var> 变量
表格
.table 表格
.table-striped 条纹状表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停
.table-condensed 紧缩表格
.table-responsive 响应式表格
.success 绿色
.active 灰色
.info 青色
.warning 黄色
.danger 红色
表单
.form-control 向所有的文本元素 \<input>、\<textarea> 和 \<select>
.form-group 表单
.form-inline 内联表单(向左对齐的,标签是并排的)
<label for=""></label> 每个输入控件设置 label 标签,屏幕阅读器将正确识别
.form-horizontal 水平排列的表单
text 文本
password 密码
datetime 日期时间
datatime-local 当地日期时间
date 日期
month 月
time 事件
input week 周
number 数字
email 邮件
url 链接
search 搜索
tel 电话
color 颜色
rows="3" 根据需要改变 rows 属性
.checkbox 多选框
.radio 单选框
.checkbox-inline 内联多选框
.radio-inline 内联单选框
选择框(select)
.form-control 下拉菜单
multiple="multiple" 允许用户选择多个选项
.form-control-static 需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static
<fieldset></fieldset> 可以禁用 <fieldset> 中包含的所有控件
.has-feedback 为输入框添加额外的图标
.form-control-feedback 为输入框添加额外的图标子元素
.sr-only 隐藏表单控件的 <label> (而不是使用其它标签选项,如 aria-label 属性), 一旦它被添加,Bootstrap 会自动调整图标的位置。
按钮
.btn 按钮
.btn-default 默认样式
.btn-primary 原始按钮样式
.btn-success 绿色
.btn-info 青色
.btn-warning 黄色
.btn-danger 红色
.btn-link 链接式按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 激活状态
.disabled 禁用按钮
图片
.img-responsive 响应式图片
.img-rounded 图片圆角
.img-circle 圆形图片
.img-thumbnail 缩略图/有边框
辅助类
.pull-left 左浮动
.pull-right 右浮动
.center-block 水平居中
.clearfix 清除浮动
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外,其他设备上隐藏元素
.sr-only-focusable 与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户)
.text-hide 将页面元素所包含的文本内容替换为背景图
.close 显示关闭按钮
.caret 显示下拉式功能 下拉菜单
.dropdown 下拉菜单
.dropdown-menu 下拉选项
.dropup 上拉菜单
.dropdown-toggle 下拉菜单切换
.dropdown-menu-right 右对齐
.dropdown-menu-left 左对齐
.dropdown-header 标题
.drivider 分割线
.disabled 禁用项
按钮组
.btn-group 按钮组
.btn-toolbar 多重按钮组
.btn-group-vertical 水平按钮组
.btn-group-justified 两端对齐排列的按钮组
输入框组
.input-group 输入框组
.input-group-addon 单独一侧加控件
.input-group-btn 单独一侧加按钮
导航元素
.nav nav-tab 标签页
.nav nav-pills 胶囊式标签页
.nav nav-pills nav-stacked 胶囊式标签页以垂直方向堆叠排列的
.nav-justified 两端对齐的标签页
.disabled 禁用的标签页
.tab-content 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改
.tab-pane 与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改
导航条
.navbar
.navbar-defalut 默认样式
.navbar-toggle 响应式导航栏
.narbar-header 导航栏头部
.narbar-brand 导航栏图标
.navbar-form 导航栏表单
.navbar-btn 导航栏按钮
.navbar-text 导航栏文本
.navbar-link 非导航的链接
.navbar-left 左对齐
.navbar-right 右对齐
.navbar-fixed-top 固定在顶部
.navbar-fixed-botton 固定在底部
.navbar-static-top 静态的顶部
.navbar-inverse 反色导航栏
分页
.pagination
.disabled 定义不可点击的链接
.active 指示当前的页面
翻页
.pager
.previous 上一页左对齐
.next 下一页右对齐
.disabled 禁用
面包屑导航
.breadrumb
标签
.lable lable-default 默认灰色标签
.lable lable-primary 蓝色标签
.lable lable-success 绿色标签
.lable lable-info 浅蓝色标签
.lable lable-warning 黄色标签
.lable lable-danger 红色标签
徽章
.badge
巨幕
.jumbotron
页头
.page-header
缩略图
.thumbnail
警告框
.alert alert-sccess 绿色警告框
.alert alert-info 浅蓝色警告框
.alert alert-warning 黄色警告框
.alert alert-danger 红色警告框
.alert-dismissible 可关闭的警告框
进度条
.progress
.progress-bar 显示进度百分比
.progress-bar-striped 条纹进度条
多媒体对象
.media
.media-left 媒体左边内容
.media-object 媒体对象
.media-body 媒体主体
.media-heading 媒体标题
.media-list 媒体对象列表
列表组
.list-group
.list-group-item 列表组子元素
面版
.panel
.panel-default 默认面版
.panel-body 面版主体
.panel-heading 面版标题
.panel-footer 面版脚注
嵌入内容
.embed-responsive
.embed-responsive-item 嵌入内容子元素

Bootstrap常用单词组的更多相关文章

  1. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  2. bootstrap 常用类名

    一. 常用类1.container居中的内容展示2.row  行内容显示3.col 列内容显示, 列必须在row 中xs 宽度小于768 ,sm宽度小于990 大于768 ,md 宽度大于990,小于 ...

  3. Bootstrap表单

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...

  4. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  5. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  6. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

  7. BootStrap常用组件及响应式开发

    BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...

  8. 基于Bootstrap表单验证

    基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...

  9. Bootstrap中表单控件状态(验证状态)

      Bootstrap 表单 http://www.runoob.com/try/try2.php?filename=bootstrap3-form-controlstate (这链接里有简介) &l ...

随机推荐

  1. Autofac之生命周期和事件

    Autofac为注册的类型对象提供了一套生命周期事件,覆盖了一个类型从注册到最后“释放”的一套事件.有了这些事件,我们可以相对方便的在类型对象的各个阶段进行AOP操作. builder.Registe ...

  2. 保护url时效性和安全性的一种解决方案

    几乎都是同事小哥哥帮我铺路,给我参考链接,实现的理论方法以及知识,我只剩下看资料,敲代码,出错了也是他帮我看着一步步解释搞定过来的.嗯,大好人一枚. ok,思路: 是生成一个随机数放在url里面,当做 ...

  3. springcloud学习第一坑

    我是根据周立先生所写的<Spring+Cloud与Docker微服务架构实战>来学习SpringCloud的,我会记录下来我日常遇到的所有问题,包括但不仅只包括SpringCloud的问题 ...

  4. Spring Boot事务管理(上)

    摘要 本文主要介绍基于Spring Boot的事务管理,尤其是@Transactional注解详细用法.首先,简要介绍Spring Boot中如何开启事务管理:其次,介绍在Spring,Spring ...

  5. Logstash - Working with plugins(使用插件)

    本章节开始介绍logstash的插件及功能,插件对于logstash来说非常重要,按类别分为:input.filter.codec.output四种类型. logstash有非常丰富的插件,通过安装目 ...

  6. 【托业】【跨栏】TEST04

    16~20 16 17 18 19 20 REVIEW TEST4

  7. 2019-04-20 Python之科学计算库学习总结

    一.numpy库和matplotlib库的学习 (1)numpy库介绍:科学计算包,支持N维数组运算.处理大型矩阵.成熟的广播函数库.矢量运算.线性代数.傅里叶变换.随机数生成,并可与C++/Fort ...

  8. webpack(5) -开发环境

    使用 source map (仅用于开发环境) 当 webpack 打包源代码时,可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置.例如,如果将三个源文件(a.j ...

  9. less is more,so 只记 less

    less + 文件名 1.Enter键 :向下翻一行 2.空格键 :向下翻一屏 3.j键 :想下翻一行 4.k键 :向上翻一行 5.f键 :向下翻一屏 6.b键 : 向上翻一屏 7.d键 :向下翻半屏 ...

  10. 使用dbms_profiler收集存储过程每步执行时间

    最近和优化团队的专家学到一个很有意义的内置包:dbms_profiler,专门用于分析Oracle存储过程中的各段代码的时间开销情况,从而快速找到性能瓶颈的步骤. 1.sys创建dbms_profil ...