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

 

 

 

效果图

 

转载于:https://www.cnblogs.com/MirageFox/p/5020056.html