您的位置：首页 > Web前端 > BootStrap

Bootstrap3学习笔记：基础排版

2015-02-02 00:00 721 查看

摘要: HTML基础页面排版（Typography），例如：标题、地址、列表、文本模块。在Bootstrap中在此基础上做了不少优化工作。

　　HTML基础页面排版（Typography），例如：标题、地址、列表、文本模块。在Bootstrap中在此基础上做了不少优化工作。

<!DOCTYPE html>
<html>
<head>
<meta charst="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- user-scalable=no 在移动设备浏览器上，禁止用户缩放（zooming） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
<title>Bootstrap基础练习</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的，如果不用可移除 -->
<!-- 注意：Respond.js不支持 file:// 方式的访问 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 标题元素的用法和标题元素中<small>的字体颜色 -->
<!-- <small>在h1、h2、h3内是当前元素对应字体大小的65%，在h4、h5、h6下则是75% -->
<h1>Boorstrap：H1 显示 <small>在H1中的small样式</small></h1>
<h2>Boorstrap：H2 显示 <small>在H2中的small样式</small></h2>
<h3>Boorstrap：H3 显示 <small>在H3中的small样式</small></h3>
<h4>Boorstrap：H4 显示 <small>在H4中的small样式</small></h4>
<h5>Boorstrap：H5 显示 <small>在H5中的small样式</small></h5>
<h6>Boorstrap：H6 显示 <small>在H6中的small样式</small></h6>
<!-- class 样式中没有定义 margin-top 和 margin-bottom -->
<span class="h1">class样式中 Boorstrap：H1 显示</span><br />
<span class="h2">class样式中 Boorstrap：H2 显示</span><br />
<span class="h3">class样式中 Boorstrap：H3 显示</span><br />
<span class="h4">class样式中 Boorstrap：H4 显示</span><br />
<span class="h5">class样式中 Boorstrap：H5 显示</span><br />
<span class="h6">class样式中 Boorstrap：H6 显示</span><br />
<p>这是普通 p 元素中段落的显示。p 元素内的段落会有一个额外的margin-bottom，大小是行间距的一半（默认为10px）。</p>
<!-- .lead样式其主要作用是增大字体大小、粗细、行距和margin-bottom。 -->
<p class="lead">如果想让一个段落突出，可以使用.lead样式。</p>
<p class="text-left">text-left</p>
<p class="text-center">text-center</p>
<p class="text-right">text-right</p>
<p class="text-justify">text-justify</p>
<abbr title="abbr元素实现了缩略词的功能，鼠标移动到缩略词上时，显示title里的属性值。">abbr元素</abbr>
<abbr title="abbr元素的另一种.initialism样式使字体稍微缩小一点。" class="initialism">abbr元素的另一种样式</abbr>
<!-- address元素的用法比较简单，每一行用<br />结尾即可 -->
<address>
<strong>这里是address地址元素</strong>
地址：上海市杨浦区<br />
<abbr title="Mobile Phone">P：</abbr>139168XXXXX<br />
<a href="milto:#">example@localhost.com</a>
</address>
<blockquote>
<p>不愤不启，不悱不发。举一隅，不以三隅反，则吾不复也。</p>
<small>出自<cite =title="论语·述而">论语</cite></small>
</blockquote>
<!-- blockquote元素中.pull-right用于右对齐 -->
<blockquote class="pull-right">
<p>不愤不启，不悱不发。举一隅，不以三隅反，则吾不复也。</p>
<small>出自<cite =title="论语·述而">论语</cite></small>
</blockquote>
<!-- 普通列表 -->
<ul>
<li>普通列表内容一</li>
<li>普通列表内容二</li>
<li>普通列表内容三</li>
<li>普通列表内容四</li>
<li>普通列表内容五</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第五列</li>
</ol>
<!-- 去点列表 -->
<!-- .list-unstyled样式只去除当前元素下的li旁边圆点，若li中再次嵌套ul或ol元素，将不起作用。 -->
<ul class="list-unstyled">
<li>主分类1</li>
<li>
<ul>
<li>二级分类1</li>
<li>二级分类2</li>
<ul>
<li>三级分类1</li>
<li>三级分类2</li>
</ul>
</ul>
</li>
<li>主分类2</li>
</ul>
<!-- 内联列表 -->
<!-- .list-inline样式用于实现内联列表，也就是将列表项水平显示。 -->
<ul class="list-inline">
<li>菜单A</li>
<li>菜单B</li>
<li>菜单C</li>
<li>菜单D</li>
<li>菜单E</li>
</ul>
<!-- 定义列表 -->
<dl>
<dt>dt元素下的定义列表样式</dt>
<dd>dd元素下的定义列表样式</dd>
</dl>
<!-- 水平定义列表 -->
<!-- .dl-forizontal样式的实现方式是将dt进行left浮动，同时设置宽度为160像素，再将dd的margin-left设置为180像素，达到水平效果。注意：如果dt标题超出长度将被自动隐藏。 -->
<dl class="dl-horizontal">
<dt>姓名</dt>
<dd>张大山</dd>
<dt>性别</dt>
<dd>男</dd>
<dt>经历</dt>
<dd>XXXX年XX月XX日出生</dd>
<dd>XXXX年就读于XXX小学</dd>
<dd>XXXX年就读于XXX初中</dd>
<dt>.dl-forizontal样式的实现方式是将dt进行left浮动，同时设置宽度为160像素，再将dd的margin-left设置为180像素，达到水平效果。注意：如果dt标题超出长度将被自动隐藏。</dt>
<dd>.dl-forizontal样式的实现方式是将dt进行left浮动，同时设置宽度为160像素，再将dd的margin-left设置为180像素，达到水平效果。注意：如果dt标题超出长度将被自动隐藏。</dd>
</dl>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Bootstrap3 HTML CSS JavaScript

相关文章推荐

新的分享

章节导航