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

    效果图

  • 相关阅读:
    CXF JaxWsDynamicClientFactory 错误:编码GBK的不可映射字符
    关于springboot配置DataSource
    Spring Boot2.0加载多个数据源
    Kettle配置发送邮件
    推荐几个不错的VUE UI框架
    vue基础语法一
    Maven在Eclipse下构建多模块项目过程
    利用eclipse把jar包安装到本地仓库
    设计模式之策略模式
    设计模式之观察者模式
  • 原文地址:https://www.cnblogs.com/MirageFox/p/5020056.html
Copyright © 2011-2022 走看看