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

    效果图

  • 相关阅读:
    阻止表单重复提交的办法以及支付成功后页面后退重复提交的解决方案
    jsp页面的共用
    空间谱专题02:波束形成(Beamforming)
    空间谱专题01:信号模型
    空间谱专题00:综述
    BP神经网络
    fdatool的滤波器设计
    Testbench
    Cordic算法简介
    快速删除注释
  • 原文地址:https://www.cnblogs.com/MirageFox/p/5020056.html
Copyright © 2011-2022 走看看