查看“Bootstrap排版”的源代码
←
Bootstrap排版
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==Bootstrap 标题== *Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 *使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。 *Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。请看下面的实例: *[[文件:w8-30.png]] <nowiki> <h1>我是标题1 h1</h1> <h2>我是标题2 h2</h2> <h3>我是标题3 h3</h3> <h4>我是标题4 h4</h4> <h5>我是标题5 h5</h5> <h6>我是标题6 h6</h6> </nowiki> ===内联子标题=== *如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 <nowiki><small></nowiki>,或者添加 <nowiki>.small class</nowiki>,这样子您就能得到一个字号更小的颜色更浅的文本,如下面实例所示: *[[文件:w8-31.png]] <nowiki><h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2> <h3>我是标题3 h3. <small>我是副标题3 h3</small></h3> <h4>我是标题4 h4. <small>我是副标题4 h4</small></h4> <h5>我是标题5 h5. <small>我是副标题5 h5</small></h5> <h6>我是标题6 h6. <small>我是副标题6 h6</small></h6> </nowiki> ===引导主体副本=== *为了给段落添加强调文本,则可以添加 <nowiki>class="lead"</nowiki>,这将得到更大更粗、行高更高的文本,如下面实例所示: <nowiki> <h2>引导主体副本</h2> <p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p> </nowiki> ===强调文本=== *HTML 的默认强调标签 <nowiki><small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)。</nowiki> *[[文件:w8-32.png]] *Bootstrap 提供了一些用于强调文本的类,如下面实例所示: <nowiki> <small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内,并呈现为斜体</em><br> <p class="text-left">向左对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-right">向右对齐文本</p> <p class="text-muted">本行内容是减弱的</p> <p class="text-primary">本行内容带有一个 primary class</p> <p class="text-success">本行内容带有一个 success class</p> <p class="text-info">本行内容带有一个 info class</p> <p class="text-warning">本行内容带有一个 warning class</p> <p class="text-danger">本行内容带有一个 danger class</p> </nowiki> ==Bootstrap字体图标== '''本节内容只针对Bootstrap3有效''' 用法:如需使用图标,只需简单地使用下面代码即可: <nowiki><span class="glyphicon glyphicon-shopping-cart"></span></nowiki> 更多图标请看[https://v3.bootcss.com/components/ 这里] 包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bootstrap 免费使用。为了表示感谢,希望你在使用时尽量为 Glyphicons 添加一个友情链接。 [[文件:web5-7.png]] 样例: <nowiki><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航栏的字形图标</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> ><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1.0 "> <style> body { padding-top: 50px; padding-left: 50px; } </style> <!--[if lt IE 9]> <script src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li> <li><a href="#support"><span class="glyphicon glyphicon-headphones"></span> Support</a></li> </ul> </div><!-- /.nav-collapse --> </div><!-- /.container --> </div> </body> </html></nowiki> *参考文档: *[1] 菜鸟教程:Bootstrap 排版 http://www.runoob.com/bootstrap/bootstrap-typography.html
返回至
Bootstrap排版
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息