Bootstrap排版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap</title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<body class="container">
<!------------------------------------------标题------------------------------------------------------------->
<div class="container">
<h1 class="page-header">标题</h1>
<h1>h1. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h1>
<h2>h2. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h2>
<h3>h3. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h3>
<h4>h4. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h4>
<h5>h5. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h5>
<h6>h6. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h6>
</div>
<!------------------------------------------页面主体------------------------------------------------------------->
<h1 class="page-header">页面主体</h1>
<div>
<p> 普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。
普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。</p>
<p class="lead">通过添加.lead可以让段落突出显示.通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示
通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示</p>
</div>
<!------------------------------------------强调------------------------------------------------------------->
<h1 class="page-header">强调</h1>
<small>1、小号文本------对于不需要强调的inline或block类型的文本，使用small标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。
你还可以为行内元素赋予.small以代替任何small标签。</small><br />
<strong>2、着重--------通过增加font-weight强调一段文本。 </strong><br />
<em>3.斜体---------用斜体强调一段文本。</em>
<p class="text-left">4.1----对齐class,左对齐</p>
<p class="text-center">4.2----对齐class,中间对齐</p>
<p class="text-right">4.3----对齐class,右对齐</p>
<!------------------------------------------强调Class------------------------------------------------------------->
<h1 class="page-header">强调Class</h1>
<p class="text-muted">这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。</p>
<p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<!------------------------------------------缩略图------------------------------------------------------------->
<h1 class="page-header">缩略图</h1>
<p>当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。</p>
<abbr title="如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。">基本缩略语</abbr><br />
<abbr title="为缩略语添加.initialism可以将其font-size设置的更小些。" class="initialism">缩略图initialism</abbr>
<!------------------------------------------地址------------------------------------------------------------->
<h1 class="page-header">地址</h1>
<p>让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。</p>
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Garnett</strong><br>
<a href="#">first.last@example.com</a>
</address>
<!------------------------------------------引用------------------------------------------------------------->
<h1 class="page-header">引用</h1>
<blockquote>
<p>默认样式的引用，将任何HTML裹在blockquote之中即可表现为引用。对于直接引用，我们建议用p标签。</p>
<small>引用来源<cite title="Source Title">来源名称</cite></small>
</blockquote>
<!------------------------------------------列表------------------------------------------------------------->
<h1 class="page-header">无序列表</h1>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<h1 class="page-header">有序列表</h1>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<h1 class="page-header">无样式列表</h1>
<ul class="list-unstyled">
<li>无样式列表</li>
<li>无样式列表</li>
<li>无样式列表</li>
<li>无样式列表</li>
<li>无样式列表</li>
</ul>
<h1 class="page-header">内联列表,将所有元素放置于同一列。</h1>
<ul class="list-inline">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<!------------------------------------------描述------------------------------------------------------------->
<h1 class="page-header">描述</h1>
<dl>
<dt>.Lorem ipsum dolor sit amet</dt>
<dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd>
</dl>
<dl class="dl-horizontal">
<dt>.dl-horizontal</dt>
<dd>可以让dl内短语及其描述排在一行。</dd>
</dl>
</body>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</html>
Bootstrap排版的更多相关文章
- 第二百三十二节，Bootstrap排版样式
Bootstrap排版样式 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面 主体.对齐.列表等常规内容. 一．页面排版 Boot ...
- 测开之路一百零七：bootstrap排版
引入bootstrap和jquery 标题 对齐 正文强调 引言 <!DOCTYPE html><html lang="en"><head> & ...
- bootstrap学习笔记--bootstrap排版类的使用
标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式,这个和一般的html没啥区别.请看下面的实例: <h1>测试1 h1</h1> <h2& ...
- 第五篇.Bootstrap 排版
使用bootstrap的排版特性可以创建标题,段落,列表及其它内联元素. 标题:bootstrap中定义了从h1-h6的六种标题样式. 内联子标题: 如果需要向任意一个标题添加一个子标题,只需要加上& ...
- Bootstrap 排版 笔记
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
- Bootstrap 排版
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
- Bootstrap排版——HTML元素的样式重定义
前面的话 Bootstrap对默认的HTML元素进行了CSS样式定义,使得各种基本结构套用出来的HTML页面更加美观.本文将详细介绍Bootstrap中排版相关的内容 标题 [h] HTML 中的所有 ...
- bootstrap排版实战
bootstrap+angular实战 CASE-01:页面总体排版 说明:页面排版整体分为三个部分(见产品图):上导航条(红色区域).左导航条(紫色区域).内容区域(蓝色区域).左导航条的区域是由整 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：可滚动
<!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设置浮动和偏移
<!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...
随机推荐
- 基于Live555,ffmpeg的RTSP播放器直播与点播
基于Live555,ffmpeg的RTSP播放器直播与点播 多路RTSP高清视频播放器下载地址:http://download.csdn.net/detail/u011352914/6604437多路 ...
- <三>面向对象分析之UML核心元素之参与者
一:版型 --->在UML里有一个概念叫版型.有些书里也称类型,构造型. --->这个概念是对一个UML元素基础定义的扩展.在同一个元素基础定义的基础上赋予特别 ...
- TCP/IP详解学习笔记(9)-TCP协议概述
终于看到了TCP协议,这是TCP/IP详解里面最重要也是最精彩的部分,要花大力气来读.前面的TFTP和BOOTP都是一些简单的协议,就不写笔记了,写起来也没啥东西. TCP和UDP处在同一层---运输 ...
- 数据来自后台非Ajax加载的联动实现方法
要实现的效果如下,通过一级标签来控制二级标签, 第一步:在Conctroller中获取数据,并且请到modle里面返回 ModelAndView model = new ModelAndView(&q ...
- 应用市场高速下载以及网页端调起APP页面研究与实现
Github博文地址,此处更新可能不是很及时. 好久没写博客了,好大一个坑.正好,最近刚做完应用市场的高速下载功能,便拿来填了这个坑. 话说产品为了增加用户量,提升用户活跃度以及配合推广,更坑爹的是看 ...
- HDU 5122 K.Bro Sorting
K.Bro Sorting Time Limit: 2000/2000 MS (Java/Others) Memory Limit: 512000/512000 K (Java/Others) Tot ...
- js代码大全（里面啥都有）
事件源对象event.srcElement.tagNameevent.srcElement.type 捕获释放event.srcElement.setCapture(); event.srcElem ...
- new trip
离开YY已经快一周了,特别感谢以前的老大姚冬和朱云峰,从他俩身上学到了很多.这个决定也经过了很长的纠结,不想再做个犹豫不决的人,所以最后还是坚定了最初的信念,也算是对半年前自己的一个完好交代,以防将来 ...
- 我的EC-final总结
by.Max EC-final正式结束,也预示着我大学ICPC旅程的结束.回来睡了一天,现在也可以总结一下了 被告知参赛: 本来以为就会这样告别ACM-ICPC,没想到半个月前徐老师告诉我们SHU给我 ...
- Unity中Instantiate一个prefab时需要注意的问题
在调用Instantiate()方法使用prefab创建对象时,接收Instantiate()方法返回值的变量类型必须和声明prefab变量的类型一致,否则接收变量的值会为null. 比如说,我在 ...