首页 > 代码库 > bootstrap学习总结-03 常用标签

bootstrap学习总结-03 常用标签

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="http://www.mamicode.com/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="http://www.mamicode.com/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>

内联列表: 通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。

<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="http://www.mamicode.com/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="http://www.mamicode.com/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 代码

1)内联代码   

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

举例来说<code>&lt;section&gt;</code> 包括引入的代码块。            <br/>            使用<code> &lt;h1&gt; </code> 加粗标题

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

3)代码块

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

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

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

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>

 

 

资料参考:

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

 

bootstrap学习总结-03 常用标签