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 ...
随机推荐
- WebServices生成发布过程及常见问题的解决方法
春夏秋冬走健康之路看四季养生网 健康饮食 养生问题 母婴保健 养生小常识 3.下一步,我们需要将Myservice文件夹拷贝到C:\Inetpub\wwwroot目录下(重要).如下图所示 然后依次 ...
- Azure SQL 数据库:服务级别与性能问答
ShawnBice 2014 年 5 月 5 日上午 10:00 几天前,我发表了一篇文章,并就 4 月 24 日发布的适用于Windows Azure SQL 数据库的新服务级别提供了一些预料 ...
- VS2010下编译安装DarwinStreamingServer5.5.5
源码下载链接:http://dss.macosforge.org/源码版本: 5.5.5版本电脑环境:visual studio2010,window 7 x64系统.用VS2010打开WinNTSu ...
- windows装liunx双系统
http://jingyan.baidu.com/article/60ccbceb18624464cab197ea.html http://jingyan.baidu.com/article/76a7 ...
- 【转】第一次使用Android Studio时你应该知道的一切配置(三):gradle项目构建
原文网址:http://www.cnblogs.com/smyhvae/p/4456420.html [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.c ...
- 她让我懂得了怎样学习Flash
原文:http://www.asv5.cn/blog/article.asp?id=169 最近忙着寻找两样丢失了很久的东西,都是她帮我找回来的,第一样叫做自信,第二样叫做梦想.也正因为有了她,我才从 ...
- ThinkAndroid是简洁,快速的进行Android应用程序的框架
ThinkAndroid简介ThinkAndroid是一个免费的开源的.简易的.遵循Apache2开源协议发布的Android开发框架,其开发宗旨是简单.快速的进行Android应用程序的开发,包含A ...
- (原创)LAMP教程6-使用SecureCRTPortable工具远程连接centos
(原创)LAMP教程6-使用SecureCRTPortable工具远程连接centos 是的,今天老柯就给大家介绍一款可以远程连接centos的工具,是的这个就是目前,最夯实的,最多人使用的Secur ...
- Selenium2Library系列 keywords 之 _SelectElementKeywords 之 _get_values_for_options(self, options)
def _get_values_for_options(self, options): values = [] for option in options: values.append(option. ...
- Cadence原理图与Allegro交互
1:激活orCAD与Allegro的交互程序 打开原理图,Options->Preference在Miscellaneous里勾选 2:打开用到的工程 原理图,还有Allegro PCB Des ...