Bootstrap——全局CSS样式
1.栅格系统
containter:用于固定宽度并支持响应式布局的容器
container-fluid:用于100%宽度,占据全部视口(viewport)的容器
row:行,必须在container或container-fluid之内
col-md/xs-*:设置块的列宽
col-md/xs-offset-*:列偏移
col-md-push/pull:推/拉
2.排版
<h1><h6>:尺寸
<small>:副标题
<p></p>:段落
lead:中心内容,字体变大
<mark></mark>内敛文本,特殊的曙色
<del></del>被删除的文本
<s></s>无用文本
<ins></ins>插入文本
<u></u>:带下划线的文本
<small><small>:小号文本
<strong></strong>:着重
<em></em>:斜体
text-left/center/right/justify:左中有下对齐
text-lowercase/uppercase/capitalize:小写/大写/首字母大写
<abbr></abbr>:基本缩略语
initialism:首字母缩略语
<br>:地址
<blockquote></blockquote>:引用
<footer></footer>:表名引用来源
<cite></cite>:标签语
blockquote-reverse:内容左右对齐
list-unstyled:无样式列表
list-inline:将所有元素放置在同一行
<d1><dt></dt><dd></dd>...</d1>:描述内容
d1-horizontal:水平排列的描述
3.代码
<code></code>:让代码显示出来
<kbd></kbd>:标记用户通过键盘输入的内容
<pre></pre>:正确的展示代码,尖括号需要转义
<var></var>:标记变量
<samp></samp>:来标记程序输出的内容
4.表格
table:表格的基本样式
table-striped:条纹
table-bordered:增加边框
table-hover:鼠标悬停
table-condensed:紧缩表格
active/success/info/warning/danger:状态,颜色。
table-responsive:响应式表格,缩小时会有水平滚动条
5.表单
form-control:文本都会有
form-group:表单通用类,每个表单都有
form-inline:内容左对齐,并表现为inline-block级别,内联表单
sr-only:隐藏内联表单的标签
form-horizontal:水平表单
placeholder:默认值
checkbox-inline /radio-inline:多选或单选控件
form-control-static:将纯文本和label元素放置在同一行
readonly:只读
has-feedback:文本框中添加额外的值
form-group-lg/form-group-sm :尺寸
6.按钮
btn:
btn-default:
role="button":于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,必须添加
btn=lg/sm/xs:尺寸
btn-block:拉伸至父元素的100%
opacity:禁用
7.图片
img-responsive :可以让图片支持响应式布局
center-block:让图片水平居中
img-rounded/circle/thumbnail:圆角/原型/边框
8.其它
text-info/success/danger..:文字颜色或属性
bg-info/success..:背景颜色或属性
close:”x“关闭符号
caret:三角符号
!important:让任意元素左右浮动
clearfix:清除浮动
show/hidden:显示/隐藏
Bootstrap——全局CSS样式的更多相关文章
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- 响应式布局和BootStrap 全局CSS样式
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- Bootstrap全局CSS样式之排版
Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- Bootstrap全局CSS样式之表格
.table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...
- Bootstrap全局CSS样式之button和图片
.btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...
- Bootstrap全局CSS样式之表单
.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...
- bootstrap全局css样式
以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...
- 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2
1.表格 <div class="container"> <table class="table "> <thead> &l ...
随机推荐
- Android Studio +MAT 分析内存泄漏实战
对于内存泄漏,在Android中如果不注意的话,还是很容易出现的,尤其是在Activity中,比较容易出现,下面我就说下自己是如何查找内存泄露的. 首先什么是内存泄漏? 内存泄漏就是一些已经不使用的对 ...
- hdu1708(C++)
这个题目明确说了不涉及大数,假设第i个为b[i]: b[0]=s1; b[1]=s2; b[3]=s1+s2; b[4]=s1+2*s2; b[5]=2*s1+3*s2: b[6]=3*s1+5*s2 ...
- 负样本采样及bias校准、ctr平滑
参考:https://zhuanlan.zhihu.com/p/31529643 在CTR预估中,负样本采样是一种常见的特征工程方法.一般CTR预估的原始正负样本比可能达到1:1000~1:10000 ...
- MD5算法了解(JAVA实现)
MD5算法:尽管已经被破解,但任然广泛应用于各个领域中 如文件校验:当我们下载文件时为了保证文件的安全性,我们能够在其站点上找到相应的md5值进行校验,假设md5值不一致,也就是说文件被人动过(一般都 ...
- linux 文件删除恢复extundelete
首先要把删除文件所有磁盘分区卸载掉 然后安装yum install -y extundelete *2fs* extundelete /dev/sdb1 --inode #查看sdb1分区下删除的文件 ...
- 每天一个 Linux 命令(57):ss命令
ss是Socket Statistics的缩写.顾名思义,ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.但ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信 ...
- 【Python】学习笔记十五:循环对象
循环对象 所谓的循环对象,包含有一个next()方法(python3中为__next__() ),这个方法的目的就是进行到下一个结果,而在结束一系列结果之后,举出StopIteration错误 当一个 ...
- socket 、 udp 和 tcp
强调一点: socket . udp . tcp之间的区别. socket只是一种套接字,就是两台电脑两端的东西,中间传输以流的格式进行. IBEO好像是TCP/IP , 无论对于TCP和UDP, ...
- 【Android实战】Gallary+ImageSwicther图片查看器
仿照如今各大新闻站点图片新闻的浏览模式,上面展示详细图片(ImageSwitch),以下是能够滑动的小图片(Gallery). 当中须要注意的是ImageSwitch须要定义一个工厂返回的组件,而且能 ...
- 在Centos 7上安装配置 Apche Kafka 分布式消息系统集群
Apache Kafka是一种颇受欢迎的分布式消息代理系统,旨在有效地处理大量的实时数据.Kafka集群不仅具有高度可扩展性和容错性,而且与其他消息代理(如ActiveMQ和RabbitMQ)相比,还 ...