<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>排版</title>

    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.css">

    <!-- 5.处理兼容性的js文件

        cssHack  条件注释法 -->

    <!--[if lt IE 9]>

      <script src="bootstrap-3.3.5-dist/js/html5shiv.min.js"></script>

      <script src="bootstrap-3.3.5-dist/js/respond.min.js"></script>

    <![endif]-->

    <style>

        body{

            padding:50px 100px;

    </style>

</head>

<body>

    <!-- 排版 -->

    <!-- 标题 -->

    <!--

        h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

        在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

    -->

    <h1>h1标题<small>small标签</small></h1>

    <h2>h2标题<span class="small">small类</span></h2>

    <h3>h3标题</h3>

    <span class="h4">.h4类样式</span>

    <span class="h5">.h5类样式</span>

    <span class="h6">.h6类样式</span>

    <!-- 页面主体 -->

    <!--

        全局 font-size 设置为 14px，line-height 设置为 1.428

        <p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

     -->

    <P >Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</P>

    <!-- 中心内容 -->

    <!--

        通过添加 .lead 类可以让段落突出显示。

     -->

    <p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>

    <!-- 内联文本元素 -->

    Marked text:要突出显示一段文本，因为它与另一个上下文相关，请使用<mark> mark </mark>标记<br>

    被删除的文本:被<del>删除</del>的文本<br>

    无用文本:<s>无用文本</s><br>

    插入文本:<ins>插入文本</ins><br>

    带下划线的文本:<u>带下划线的文本</u><br>

    小号文本:

    <!-- 对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。 -->

    <div>父级容器文本<br>

        <small>父级文本字体的85%</small><br>

        <span class="small">small类的子类文本</span><br>

    </div>

    着重:<strong>强调</strong>一段文本<br/>

    斜体:通过<em>斜体</em>强调一段文本<br/><br/>

    <!-- 在 HTML5 中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。 -->

    <!-- 对齐 -->

    <p class="text-left">左对齐文本。</p>

    <p class="text-center">居中对齐文本。</p>

    <p class="text-right">右对齐文本</p>

    <p class="text-justify">两端对齐文本。</p>

    <p class="text-nowrap">不自动换行文本。</p>

    <!-- 改变大小写 -->

    <p class="text-lowercase">LOWERCASE TEXT.</p>

    <p class="text-uppercase">uppercased text</p>

    <p class="text-capitalize">capitalized text.</p><br><br>

    <!-- 缩略语 -->

    <!--

        略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针

    -->

    <abbr title="提示信息">提示</abbr>

    <abbr title="这是html文本" class="initialism">html</abbr>

    <!-- 地址 -->

    <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>Full Name</strong><br>

      <a href="mailto:#">first.last@example.com</a>

    </address>

    <!-- 引用 -->

    <!--

        在你的文档中引用其他来源的内容。

        添加 <footer> 用于标明引用来源。

        来源的名称可以包裹进 <cite>标签中。

    -->

    <blockquote>

        <p>将任何 HTML 元素包裹在 blockquote 中即可表现为引用样式</p>

        <footer>引用来源 <cite>来源名称</cite></footer>

        <footer class="blockquote-reverse">引用来源 <cite>来源名称</cite></footer>

    </blockquote>

    <!-- 列表 -->

    <!-- 无序列表 -->

    <ul>

         <li>无序列表</li>

         <li>无序列表</li>

         <ul>

             <li>无序列表</li>

              <li>无序列表</li>

         </ul>

    </ul>

    <!-- 有序列表 -->

    <ol>

      <li>有序列表</li>

      <li>有序列表</li>

      <li>有序列表</li>

    </ol>

    <!-- 无样式列表 -->

    <ul class="list-unstyled">

      <li>无样式列表</li>

      <li>无样式列表</li>

      <li>无样式列表</li>

    </ul>

    <!-- 内联列表 -->

    <ul class="list-inline">

        <li>内联列表</li>

        <li>内联列表</li>

        <li>内联列表</li>

    </ul>

    <!-- 描述 -->

    <!--

        带有描述的短语列表。

        dl-horizontal 可以让 <dl> 内的短语及其描述排在一行

    -->

    <dl>

      <dt>短语</dt>

      <dd>描述内容</dd>

    </dl>

    <dl class="dl-horizontal">

      <dt>短语</dt>

      <dd>水平排列描述内容</dd>

    </dl>

    <dl class="dl-horizontal" text-overflow >

      <dt>短语</dt>

      <dd>水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容</dd>

    </dl>

    <!-- 自动截断

    通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

     -->

<!-- 代码 -->

<!--

    内联代码

    通过 <code> 标签包裹内联样式的代码片段。

-->

    For example, <code>&lt;section&gt;</code> should be wrapped as inline.<br>

<!--

    用户输入

    通过 <kbd> 标签标记用户通过键盘输入的内容。=

 -->

    To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>

    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

<!--

    代码块

     多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。

    还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。-->

<pre class="pre-scrollable">&lt;p&gt;Sample text here&lt;/p&gt;&lt;p&gt;Sample text here&lt;/p&gt;&lt;p&gt;Sample text here&lt;/p&gt;&lt;p&gt;Sample text here&lt;/p&gt;&lt;p&gt;Sample text here&lt;/p&gt;&lt;p&gt;Sample text here&lt;/p&gt;&lt;p&gt;Sample text here&lt;/p&gt;&lt;p&gt;Sample text here&lt;/p&gt;</pre>

<!--

 变量

 通过 <var> 标签标记变量。

-->

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

<!--

程序输出

通过 <samp> 标签来标记程序输出的内容。

-->

<samp>This text is meant to be treated as sample output from a computer program.</samp>

</body>

</html>

Bootstrap方法之--排版、代码的更多相关文章

  1. [技术博客]采用Bootstrap框架进行排版布局

    [技术博客]采用Bootstrap框架进行排版布局 网页的前端框架有很多很多种,比如Bootstrap.Vue.Angular等等,在最开始其实并没有考虑到框架这回事,开始阅读往届代码时发现其部分采用 ...

  2. Bootstrap<基础三> 排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

  3. vue-cli+webpack在生成的项目中使用bootstrap方法（二）

    vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多. 当然是可以更省力些,可以通过 ...

  4. YbSoftwareFactory 代码生成插件【二十五】：Razor视图中以全局方式调用后台方法输出页面代码的三种方法

    上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把 ...

  5. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  6. Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素

    Bootstrap -- 网格系统.排版样式类. <blockquote>. <abbr> 元素 1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏 ...

  7. 使用storyboard显示UITableView时,如果不修改系统默认生成的tableView:cellForRowAtIndexPath:方法中的代码,则必须为UITableViewCell注册(填写)重用标识符:identifier.必须要代码方法中的标识符一致.

    CHENYILONG Blog 使用storyboard显示UITableView时,如果不修改系统默认生成的tableView:cellForRowAtIndexPath:方法中的代码,则必须为UI ...

  8. this、static、main方法、静态代码块、final关键字、Runtime类、Cloneable类、类成员的访问控制权限、异常体系

    this表示当前对象,用在方法内部,当某对象调用该方法时,该方法中的this就代表调用该方法的对象: static关键字: 修饰类属性后,该属性就成为该类所有实例的公共属性,修改该属性值,所有的实例的 ...

  9. java静态代码块/静态属性、构造块、构造方法执行、main方法、普通代码块的顺序

    java静态代码块/静态属性.构造块.构造方法执行.main方法.普通代码块的顺序 这也是在笔试中的一个重要的考点,就有一个输出语句让你写出输出的结果. 理论知识: 静态代码块是:属于类的,在类加载时 ...

随机推荐

  1. 3-3 Hadoop集群完全分布式配置部署

    Hadoop集群完全分布式配置部署 下面的部署步骤,除非说明是在哪个服务器上操作,否则默认为在所有服务器上都要操作.为了方便,使用root用户. 1.准备工作 1.1 centOS6服务器3台 手动指 ...

  2. HTTPS 原理浅析及其在 Android 中的使用

    作者:曹丰斌   本文首先分析HTTP协议在安全性上的不足,进而阐述HTTPS实现安全通信的关键技术点和原理.然后通过抓包分析HTTPS协议的握手以及通信过程.最后总结一下自己在开发过程中遇到的HTT ...

  3. 安卓开发学习笔记（五）：史上最简单且华丽地实现Android Stutio当中Webview控件https/http协议的方法

    一.我们先在XML当中自定义一个webview(Second_layout.xml) 代码如下: <?xml version="1.0" encoding="utf ...

  4. #Java学习之路——基础阶段（第五篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  5. [Java]LeetCode297. 二叉树的序列化与反序列化 | Serialize and Deserialize Binary Tree

    Serialization is the process of converting a data structure or object into a sequence of bits so tha ...

  6. BBS论坛（十四）

    14.1注册完成跳到上一个页面 (1)front/form.py # front/forms.py __author__ = 'derek' from ..forms import BaseForm ...

  7. python scrapy 入门,10分钟完成一个爬虫

    在TensorFlow热起来之前,很多人学习python的原因是因为想写爬虫.的确,有着丰富第三方库的python很适合干这种工作. Scrapy是一个易学易用的爬虫框架,尽管因为互联网多变的复杂性仍 ...

  8. JAVA集合类兄妹List和Set

    List 接口及其实现类 有序集合,集合中每个元素都有其对应的顺序索引,类似数组,索引也是从 0 开始,可以根据元素的索引,来访问元素. List 集合允许添加相同的元素,因为它是通过下标来取值的,不 ...

  9. 【漫画】以后在有面试官问你平衡(AVL)树，你就把这篇文章扔给他。

    西天取经的路上,一样上演着编程的乐趣..... 1.若它的左子树不为空,则左子树上所有的节点值都小于它的根节点值. 2.若它的右子树不为空,则右子树上所有的节点值均大于它的根节点值. 3.它的左右子树 ...

  10. 2018-7-27银行卡bin大全-根据银行卡开头查银行

    支付宝卡号验证工具 https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo=银 ...