bootstrap学习总结-03 常用标签1

1 显示段落

　　在HTML中，段落使用p标签包起来，重要的文字使用strong标签，em标签。<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。而在BootStramp中通过添加 .lead 类可以让段落突出显示。

<h1>标签添加一个.page-header，可以为内容添加合适的边距，并且在下方显示一条灰色的边线。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link rel="icon" href="./img/index.png">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="container">
            <h1 class="page-header">CSS<small>常用的CSS</small></h1>
            <p>
                在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 <strong>Bootstrap 3</strong> 中，我们重写了<em>整个框架</em> 使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
            </p>           
            <p class="lead">使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式</p>
        </div>
    </body>

</html>

　　也可以使用blockquote标签来引入重点凸显的内容。

<blockquote  >
                <p>
                    一个知识点，你自己看懂了，那是一个层次；你会用，是另外一个层次；
                </p>
                <footer>引自 <cite title="信平的小屋">信平的小屋</cite></footer>
</blockquote>

　　可以添加引入的内容显示的顺序，从右向左。在blockquote标签添加类.blockquote-reverse

<blockquote  class="blockquote-reverse">
                <p>
                    一个知识点，你自己看懂了，那是一个层次；你会用，是另外一个层次；
                </p>
                <footer>引自 <cite title="信平的小屋">信平的小屋</cite></footer>
</blockquote>

2 无序列表,有序列表,内联列表，描述列表

　　Bootstrap已经设定好了列表显示行的间距，样式和字体大小。

无序列表：列表里的内容没有固定的顺序。

<ul>

  <li>...</li>

</ul>

有序列表：列表里的内容有固定顺序。

<ol>

  <li>...</li>

</ol>

内联列表：通过设置 .list-inline，将所有元素放置于同一行。

<ul class="list-inline">

  <li>...</li>

</ul>

描述列表：解释词汇的标签。

<dl>

  <dt>...</dt>

  <dd>...</dd>

</dl>

BootStrap列表例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link rel="icon" href="./img/index.png">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="container">
            <h1 class="page-header">CSS<small>无序列表,有序列表,内联列表,描述列表</small></h1>
                
            <h2>无序列表</h2>    
            <ul>
              <li>111</li>
              <li>222</li>
              <li>333</li>
            </ul>
            
            <h2>有序列表</h2>    
            <ol>
              <li>111</li>
              <li>222</li>
              <li>333</li>
            </ol>
            
            <h2>内联列表</h2>
            <ul class="list-inline">
              <li>111</li>
              <li>222</li>
              <li>333</li>
            </ul>
                        
            <h2>描述列表</h2>
            <dl>
              <dt>Description lists</dt>
              <dd>A description list is perfect for defining terms.</dd>
            </dl>
            
        </div>
    </body>

</html>

显示效果如下图所示：

3 引入代码

在BootStrap中使用<code>,<pre>标签来标记代码内容。

1)内联代码　　

　　通过 <code> 标签包裹格式化的代码片段，要对code标签里的特殊字符进行转移比如( <字符转换为&lt； >字符转换为> )

举例来说<code>&lt;section&gt;</code> 包括引入的代码块。

<br/>

使用<code> &lt;h1&gt; </code> 加粗标题

2）代码块

　　多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理，否则浏览器会认为你想使用标签来渲染某些内容。把代码块放在pre标签里的好处是可以保持代码的排版格式。

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

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

3)用户输入

　　通过 <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>

4）变量

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

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

5）程序输出

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

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

4 Google-Code-Pretiffy

　　Google-Code-Pretiffy 是 Google 的一个用来对代码进行语法着色的 JavaScript 库，支持 C/C++, Java, Python, Ruby, PHP, VisualBasic, AWK, Bash, SQL, HTML, XML, CSS, JavaScript, Makefiles和部分Perl。从以下地址下载google-code-prettify：

https://code.google.com/archive/p/google-code-prettify/downloads

步骤：

1）导入必要的 google-code-prettify的js和css文件。

2）通过使用在<pre>和<code>标签中引入类.prettyprint 对引入的代码美化。

3）body标签的onload函数，需要加载prettyPrint()事件。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/index.css" />

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

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link rel="icon" href="./img/index.png">

        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

        <link rel="stylesheet" href="js/GoogleCodePrettify/prettify.css" />

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <script src="js/GoogleCodePrettify/prettify.js"></script>

    </head>

    <body onload="prettyPrint()"

        <div class="container">

        <h1 class="page-header">CSS<small>PrettyCode代码</small></h1> 举例来说

        <pre class="prettyprint" >

#include "x.h"

main(){

print("hello world!");

}

select * from users;

        </pre>

        </div>

    </body>

</html>

　　使用 jQuery 小技巧实现优化，上述方法可以实现代码的高亮，但每次手动为<pre>标签添加"prettyprint"类，显示有些麻烦。使用下边的代码片断来解决这个问题并替换掉 body 的"onload"的事件，关键代码如下：

$(window).load(function(){

     $("pre").addClass("prettyprint");

     prettyPrint();

})

　　完整代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/index.css" />

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

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link rel="icon" href="./img/index.png">

        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

        <link rel="stylesheet" href="js/GoogleCodePrettify/prettify.css" />

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <script src="js/GoogleCodePrettify/prettify.js"></script>

    </head>

    <body onload="prettyPrint()" <div class="container">

        <h1 class="page-header">CSS<small>PrettyCode代码</small></h1> 举例来说

        <pre>

#include "x.h"

main(){

print("hello world!");

}

select * from users;

        </pre>

        </div>

        <script>

            $(window).load(function() {

                $("pre").addClass("prettyprint");

                prettyPrint();

            })

        </script>

    </body>

</html>

显示效果如下图,可以看到代码已经美化多了：

资料参考：

http://v3.bootcss.com/css/#type