Bootstrap全局CSS样式之排版
Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章《html的文本元素总结》,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总。
.small——当前元素字体大小的 85%,经常使用作副标题时,也可用<small>来取代;
.lead——让段落突出显示;
.text-left、.text-center、.text-right——将文字于左、居中、于右对齐;
.text-lowercase、.text-uppercase、.text-capitalize
——分别相应:全部字母大写、全部字母小写、首字母大写。
.blockquote-reverse——让引用呈现内容右对齐;
.list-unstyled——设置列表为无样式。
.list-inline——设置列表元素放置于同一行。并加入少量的内补(padding);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CSS全局样式排版</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
</head>
<body>
<div class="container">
<h1>欢迎訪问远地资产</h1>
<h2>欢迎訪问远地资产</h2>
<h3>欢迎訪问远地资产</h3>
<h4>欢迎訪问远地资产<small>你可信赖的理財伙伴</small></h4>
<p>宏运球迷赛后狂骂郜林及其太太 <abbr title="广州恒大前锋">郜林</abbr>扔鞋反击</p>
<p class="lead">宏运球迷赛后狂骂郜林及其太太 郜林扔鞋反击</p>
<p>宏运球迷赛后狂骂郜林及其太太 <mark>郜林</mark>扔鞋反击</p>
<p class="text-left">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
<p class="text-center">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
<p class="text-right">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>
<p class="text-lowercase">AHALjjls</p>
<p class="text-uppercase">AHALjjls</p>
<p class="text-capitalize">fkdla</p>
<address>
<strong>远地资产</strong><br/>
上海市,黄浦区<br/>
西藏中路725弄12号3楼<br/>
<abbr title="电话">P:</abbr>(021) 6553 2332
</address>
<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<ul class="list-unstyled">
<li>鲁媒:上港登顶鲁能落后已4分 BIG4鲁能最先掉队</li>
<li>西索科将出国疗伤缺席两轮 莫雷诺间歇期将同去治疗</li>
<li>力帆备战:申花有了登巴巴 力帆酝酿摆大巴</li>
</ul>
<ul class="list-inline">
<li>鲁媒:上港登顶鲁能落后已4分 BIG4鲁能最先掉队</li>
<li>西索科将出国疗伤缺席两轮 莫雷诺间歇期将同去治疗</li>
<li>力帆备战:申花有了登巴巴 力帆酝酿摆大巴</li>
</ul>
</div> </body>
</html>
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 样式
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 ...
随机推荐
- 入门到熟练-SpringBoot
Spring Boot概述 1.1. Spring Boot是什么 Spring Boot是一套基于Spring框架的微服务框架. 1.2. Spring Boot框架出现的背景 由于Spring是一 ...
- 实现基于Keepalived高可用集群网站架构的多种方法
实现基于Keepalived高可用集群网站架构 随着业务的发展,网站的访问量越来越大,网站访问量已经从原来的1000QPS,变为3000QPS,目前业务已经通过集群LVS架构可做到随时拓展,后端节点已 ...
- 百度统计的JS脚本原理分析
首先,百度统计会要求我们在要统计的页面中嵌入一段js语句,类似如下: <script type="text/javascript">var _bdhmProtocol ...
- 开篇-我眼中的FPGA
既然是开篇,那就来闲话叨一叨FPGA吧. 掰掰指头,结识FPGA估计有5年多.作为嵌入式工程师,每天的日常充斥着ARM.DSP.操作系统.通讯.总线等耳熟能详的词汇,徜徉其中不能自拔,而这其中,自觉最 ...
- 常见的Mysql数据库优化总结
索引 1.主键索引 作用:唯一约束和提高查询速度 #建表时创建主键索引 create table `table_name`( `id` int unsigned not null auto_incre ...
- JAVA基础面试(一)
1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.Java有 ...
- RAC(ReactiveCocoa)使用方法(一)
RAC(ReactiveCocoa)使用方法(一) RAC(ReactiveCocoa)使用方法(二) 什么是RAC? 最近回顾了一下ReactiveCocoa的方法,也看了一些人的文章,现写篇文章总 ...
- 浅析php命名空间
介绍 印象中只有java代码才会用到一大堆的import,当初看到后一脸懵逼并对php心生自豪:还是我大php牛逼够简洁,殊不知php也有命名空间这一说,这些年用的越来越多.那么,为什么要搞那么麻烦呢 ...
- Mysql第一周
前言:好久不见,我又来写博客拉.上个月只写了几篇django-rest-framework的,而且还是根据官网的英文写的.干货不多,内心还是有点羞耻的…… 简单说下我11月去干嘛了.11月初美图给我发 ...
- sql查询语句报错处理——ERROR: failed to find conversion function from unknown to text
今天遇到写存储过程遇到的一个小问题,在查询语句中使用到了自定义的数当做列的值,然后想给这一列起一个别名 ,就直接在后面用了 as 别名.执行存储过程,存储过程报错,ERROR: failed to f ...