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 ...
随机推荐
- 《分销系统-原创第一章》之“多用户角色权限访问模块问题”的解决思路( 位运算 + ActionFilterAttribute )
此项目需求就是根据给用户分配的权限,进行相应的权限模块浏览功能,因为项目不是很大,所以权限没有去用一张表去存,我的解决思路如下,希望大家给点建议. 数据库用户表结构如下: 数据库表梳理: BankUs ...
- UVALive 3211 Now or later(2-sat)
2-sat问题,一种在两种可能性中选择必然关系的问题. 推荐两篇论文,也是学2-sat公认比较好的材料.前者较好理解,后者需耐心看. http://www.google.com.hk/url?sa=t ...
- Library cache lock/pin详解
Library cache lock/pin 一.概述 ---本文是网络资料加metalink 等整理得来一个实例中的library cache包括了不同类型对象的描述,如:游标,索引,表,视图,过程 ...
- eclipse集承jboss服务器
eclipse Kepler + Jboss7.1 参考引用文档: http://www.tekdigest.com/how-to-install-jboss-tools-in-eclipse.htm ...
- 如何使用 orachk 工具
Oracle RAC 安装完毕后的健壮性是一个令人头疼的问题.之前Oracle为之专门推出了raccheck工具,确实方便了我们这些个苦逼的DBA.现在Oracle在raccheck的基础之上又推出了 ...
- ubuntu-12.04.1-desktop-x64下JDK环境的安装与配置
1.上oracle官网下载最新的JDK.在这里,我的系统是ubuntu-12.04.1-desktop-amd64,目前位置JDK的最新版本位7u9.jdk-for-linux有两种安装包,一种是rp ...
- Wireshark和TcpDump抓包分析心得
Wireshark和 TcpDump抓包分析心得 1. Wireshark与tcpdump介绍 Wireshark是一个网络协议检测工具,支持Windows平台和Unix平台,我一般只在Window ...
- hdu 2825(ac自动机+状态压缩dp)
题意:容易理解... 分析:在做这道题之前我做了hdu 4057,都是同一种类型的题,因为题中给的模式串的个数最多只能为10个,所以我们就很容易想到用状态压缩来做,但是开始的时候我的代码超时了dp时我 ...
- Mysql 多表联合查询效率分析及优化
1. 多表连接类型 1. 笛卡尔积(交叉连接) 在MySQL中可以为CROSS JOIN或者省略CROSS即JOIN,或者使用',' 如: SELECT * FROM table1 CROSS JO ...
- C#汉字转换拼音技术详解
C#汉字转换拼音技术详解(高性能) 下面将源代码贴出.public static class ChineseToPinYin { private sta ...