zoukankan      html  css  js  c++  java
  • bootstrap学习笔记<三>(文本,代码域,列表)

    文本对齐

    .text-left:左对齐    .text-center:居中对齐    .text-right:右对齐    .text-justify:两端对齐

    <p class="text-left">居左</p>
    <p class="text-center">居中</p>
    <p class="text-right">居右</p>
    <p class="text-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>
    View Code

      ☑   .text-left:左对齐

      ☑   .text-center:居中对齐

      ☑   .text-right:右对齐

      ☑   .text-justify:两端对齐

    效果图

     列表

    <一> bootstrap新增类别list-unstyled。一个属性就能去掉ul li的样式。

    <ul class="list-unstyled">
            <li>列表项</li>
            <li>列表项</li>
            </ul>
    View Code

    class="list-unstyled"

    <二>内联列表,简单说就是把ul li的垂直排列变为水平排列。(ps:这个功能相当实用)

    <ul class="list-inline">
        <li>W3cplus</li>
        <li>Blog</li>
        <li>CSS3</li>
        <li>jQuery</li>
        <li>PHP</li>
    </ul>
    View Code

    class="list-inline"

    效果图

    代码区

    bootstrap专为代码设置了3个风格分别为:

    1、使用<code></code>来显示单行内联代码
    2、使用<pre></pre>来显示多行块代码
    3、使用<kbd></kbd>来显示用户输入代码

    code风格:
    <div>Bootstrap的代码风格有三种:<code>&lt;code&gt;</code><code>&lt;pre&gt;</code><code>&lt;kbd&gt;</code></div>
    pre风格:
    <div>
    <pre>
    &lt;ul&gt;
    &lt;li&gt;...&lt;/li&gt;
    &lt;li&gt;...&lt;/li&gt;
    &lt;li&gt;...&lt;/li&gt;
    &lt;/ul&gt;
    </pre>
    </div>
    kbd风格:
    <div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
    View Code

    效果图

    <二>pre多行代码块y轴滚动

     class="pre-scrollable"

    高度超出340px,就会在Y轴出现滚动条
    <pre class="pre-scrollable">
    <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>
    View Code

    效果图

  • 相关阅读:
    简单缓存 datatable
    发现一句实话
    今天一个比较感兴趣的心里测试
    innodb与myisam的对比总结
    插入数据的优化
    PHP 实现事务处理
    mysql 优化的整体思路
    301跳转
    jquery显示div的方法
    <c:forEach 的常用整理
  • 原文地址:https://www.cnblogs.com/MirageFox/p/5020056.html
Copyright © 2011-2022 走看看