Bootstrap的class样式小结


Posted in Javascript onDecember 01, 2016

基础class

.code来显示单行内联代码
.pre来显示多行块代码
.kbd来显示用户输入代码
.pre-scrollable高度超出340px,就会在Y轴出现滚动条

表格class

.table基础表格margin-bottom:20px,在thead底部2px的浅灰实线,每个单元格顶部1px的浅灰实线
.table-striped:斑马线表格,隔行有一个浅灰色的背景色
.table-bordered:带边框的表格,所有单元格有1px的边框
.table-hover:鼠标悬停在表格的行上,有高亮的背景色
.table-condensed:将单元格的内距由8px调至5px
.table-responsive:设置类名.table-responsive的容器,将<table class="table">置于这个容器中

表格行的类

.active表示当前活动信息
.success成功或正确的行为
.info表示中立信息或行为
.warning表示警告
.danger表示危险活着错误行为

除了.active,其他四个类名应与.table-hover配合

表单

.form-horizontal水平表单效果,配合Bootstrap框架的网格系统;设置表单控件padding和margin值;改变“form-group”的表现形式,类似于网格系统的“row”
在Bootstrap中使用input时也必须添加type类型
为了让控件在各种表单风格中样式不出错,需要添加.form-control
多行选择设置multiple属性的值为multiple
rows定义高度,cols设置宽度。.form-control,则无需cols
checkbox还是radio都使用label包
如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”

固定导航条

页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容,我们需要在body上做一些处理:

body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 …
</div>

其实除了这种解决方案之外,我们还有其他的解决方法,把固定导航条都放在页面内容前面:

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
 …
</div>
<div class="content">我是内容</div>

在文件中添加下列样式代码:

.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}

以上所述是小编给大家介绍的Bootstrap的class样式小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 #Javascript
AngularJS中的JSONP实例解析
Dec 01 #Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 #Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 #Javascript
实例解析jQuery工具函数
Dec 01 #Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 #Javascript
获取jqGrid中选择的行的数据
Nov 30 #Javascript
You might like
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
twig模板常用语句实例小结
2016/02/04 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
Python中有趣在__call__函数
2015/06/21 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python数据挖掘需要学的内容
2019/06/23 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
建设投标担保书
2014/05/13 职场文书
作风建设年活动总结
2014/08/27 职场文书
关于倡议书的范文
2015/04/29 职场文书
公司员工奖惩制度
2015/08/04 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书