@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!--设置字符集utf-8编码-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--初始化移动浏览显示-->
<title>ChapterTwo--第二章排版</title>
<link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="container"><!--标题等-->
<!--排版1-->
<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1><!--h1-h6标题标签从大到小排列-->
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>
<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>
<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1><!--small标签制作更小字号的文本-->
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5>
<h6>Bootstrap标题六<small>我是副标题</small></h6>
<!--p标签：段落;p是块级元素-->
<p>全局文本字号为14px(font-size)，颜色为深灰色（#333）；</p>
<!--强调内容-->
<p class="lead">
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，
其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理
</p>
<p>
除此之外，Bootstrap还通过元素标签:<small>small</small><!--small标签来制作副标题,还可以表示更小字号的文本-->
<!--strong定义重要的文本-->
<strong>strong加粗</strong><em>em斜体</em>
<cite>cite</cite><!--cite标签定义作品的标题-->
</p>
<!--b标签定义粗体文本/斜体-->
<b>加粗b</b> ----------<strong>加粗strong</strong>
<em>斜体em</em>---------<i>斜体i</i>
<!--em呈现为被强调的文本-->
<!--强调相关类-->
<div class="text-muted">.text-muted：提示，使用浅灰色（#999）</div><!--.text-muted:浅灰色-->
<div class="text-primary">.text-primary：主要，使用蓝色（#428bca）</div><!--.text-primary:蓝色-->
<div class="text-success">.text-success：成功，使用浅绿色(#3c763d)</div><!--.text-success:浅禄色-->
<div class="text-info">.text-info：通知信息，使用浅蓝色（#31708f）</div><!--.text-info:浅蓝色-->
<div class="text-warning">.text-warning：警告，使用黄色（#8a6d3b）</div><!--.text-warning:黄色-->
<div class="text-danger">.text-danger：危险，使用褐色（#a94442）</div><!--danger:褐色-->
<!-- 文本对齐风格-->
<p class="text-left">左对齐，取值left</p><!--text-left:左对齐-->
<p class="text-right">右对齐，取值right</p><!--text-right右对齐-->
<p class="text-center">居中对齐，取值center</p><!--text-center居中-->
<p class="text-justify"><!--text-justify:两端对齐-->
两端对齐，取值justify.There is clearly a need for
CSS to be taken seriously by graphic artists. The Zen Garden aims to excite
, inspire, and encourage participation. To begin, view some of the existing
designs in the list. Clicking on any one will load the style sheet into
this very page. The code remains the same, the only thing that has changed
is the external .css file.
</p>
</div>
<hr style="color:red;"/><!--hr:标签水平线，定义内容中的主题变化-->
<div class="container"><!--container集装箱,容器-->
<div class="h3 text-center">-----------列表开始----------</div><!--text-center居中对齐-->
<!--列表 bootstrap定义了6种列表-->
<!--☑ 普通列表 ☑ 有序列表 ☑ 去点列表 ☑ 内联列表
☑ 定义列表☑ 水平定义列表-->
<div class="h4">有序列表</div>
<ol><!--ol有序列表-->
<li>有序列表</li><!--li列表项-->
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<hr /><!--hr标签水平线，它应该定义内容中的主题变化-->
<div class="h4">无序列表</div>
<ul><!--ul无序列表-->
<li>无序列表</li><!--li列表项-->
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<hr />
<div class="h4">列表嵌套</div>
<ol>
<li>
有序列表1
<ul>
<li>有序列表2</li>
<li>有序列表2</li>
<li>有序列表嵌套2</li>
</ul>
</li>
<li>有序列表1</li>
</ol>
<hr />
<div class="h4">列表--去点列表</div>
<ol class="list-unstyled"><!--list-unstyled去除默认的列表样式的风格-->
<li>list-unstyled类</li>
<li>有序列表去点</li>
<li>padding-left: 0;</li>
<li>有序列表去点</li>
</ol>
<hr /><!--hr标签水平线，它应该定义内容中的主题变化-->
<div class="h4">列表--内联列表</div>
<ul class="list-inline"><!--类名.list-inline实现内联列表,简单说就是把垂直列表换成水平列表-->
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<hr /> <!--hr标签水平线，它应该定义内容中的主题变化-->
<!--定义列表-->
<!--Bootstrap并没有做太多的调整，只是调整了行间距，
外边距和字体加粗效果-->
<div class="h4">列表--定义列表</div>
<dl><!--dl标签定义一个定义列表-->
<dt>定义列表dt</dt><!--定义列表中的项目-->
<dd>定义列表dd</dd><!--描述列表中的项目-->
</dl>
<hr /><!--hr标签水平线，它应该定义内容中的主题变化-->
<!--列表--水平定义列表-->
<!--1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号-->
<div class="h4">列表--水平定义列表</div>
<dl class="dl-horizontal"><!--给定义列表实现水平显示效果-->
<dt>W3cplus</dt><!--定义列表中的项目-->
<dd><!--描述列表中的项目-->
一个致力于推广国内前端行业的技术博客。它以探索为己任，
不断活跃在行业技术最前沿，努力提供高质量前端技术博文
</dd>
<dt>我来测试一个标题，我来测试一个标题</dt><!--定义列表中的项目-->
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd><!--描述列表中的项目-->
</dl>
<div class="h3 text-center">-----------列表结束----------</div><!--text-center居中对齐-->
<hr />
</div>
<div class="container"><!--代码--><!--container容器，盒子-->
<div class="h3 text-center">-----------代码风格开始----------</div><!--居中对齐-->
<!--代码风格，一般在个人博客上使用的较为频繁
，用于显示代码的风格。在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码-->
<div class="h4">code风格</div>
<div>
Bootstrap的代码风格有三种：
<code><code> </code><!--code一般是针对单个单词或单个句子的代码-->
<code><pre></code>
<code><kbd></code>
</div>
<div class="h4">pre风格</div>
<div>
<pre>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</pre>
</div>
<div class="h4">kbd风格</div>
<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
<!--不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，
大于号(>)使用“>”来替代。而且对于<pre>代码块风格，标签前面留多少个空格
，在显示效果中就会留多少个空格。建议在编写HTML标签时，就控制好 -->
<pre class="pre-scrollable">
<!--<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，
而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，
你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，
一旦超出这个高度，就会在Y轴出现滚动条-->
<ol>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
</ol>
</pre>
<div class="h3 text-center">-----------代码风格结束----------</div>
<!--居中显示-->
<div class="page-header">
<h1>页面标题实例
<small>子标题</small>
</h1>
<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>
</div>
</div>
@*Bootstrap标签*@
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Lable</span></h2>
<h3>Example Heading <span class="label label-default">Lable</span></h3>
<h4>Example Heading <span class="label label-default">Lable</span></h4>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
</div>
</div>
</div>
<hr style="padding:30px 0;"/>
</body>
</html>
扫一扫
2617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
