Bootstrap框架必备单词

.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 需要在一个水平表单内的表单标签后放置纯文本时,请在

上使用 class .form-control-static
< fieldset>< /fieldset> 可以禁用 中包含的所有控件
.has-feedback 为输入框添加额外的图标
.form-control-feedback 为输入框添加额外的图标子元素
.sr-only 隐藏表单控件的

下拉菜单
.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                  嵌入内容子元素
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值