Bootstrap 排版

2018-04-19 本文已影响0人不睡觉呀

一、段落

<p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
    </p>

    <p class="lead">
        在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，<mark>Bootstrap </mark>(这里使用了mark标签，使用mark标记的内容有浅色背景阴影效果)是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
    </p>
    <p>
        在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
    </p>

<style>
        p{
            text-indent: 2em;
        }
    </style>

如果要突出显示某个段落内容只需要添加class值为lead即可。
mark标签突出标记文字内容。被标记的内容有浅色背景阴影。、
效果图：

image.png

二、文本对齐方式

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

三、字母大小写

text-lowercase 将字母转换为小写
text-uppercase 将字母转换为大写
text-capitalize 将首字母大写

        <p class="text-lowercase">BOOTSTRAP </p>
        <p class="text-uppercase">bootstrap </p>
        <p class="text-capitalize">bootstrap </p>

效果图：

image.png

四、abbr标签的title属性

<div class="a text-center">
        <p>title属性在我们鼠标悬停的时候会显示跟踪的内容，一般用于显示缩略文字的全部内容。bootstrap结合abbr标签可以显示缩略文本的详细信息，<abbr title="缩略文本会以虚线突出显示">缩略文本</abbr>缩略文本会以虚线突出显示，当鼠标移上去后会显示一个问号。</p>
    </div>

Attention:<p>title属性在我们鼠标悬停的时候会显示跟踪的内容，一般用于显示缩略文字的全部内容。bootstrap结合abbr标签可以显示缩略文本的详细信息，<abbr title="缩略文本会以虚线突出显示">缩略文本</abbr>缩略文本会以虚线突出显示，当鼠标移上去后会显示一个问号。</p>

五、引用样式

<blockquote class="blockquote-reverse">
            <p>可以使用blockquote标签来表现对文字的引用，引用的neural包含在p标签中，可以通过footer标签标记引用源，原名称可以包含在cite标签中，在blockquote标签中添加class值为blockqute-reverse的内容可以实现文本内容的右对齐</p>
            <footer>The fire</footer>
            <cite>Be clam Be strong</cite>
        </blockquote>

可以使用blockquote标签来表现对文字的引用，引用的内容包含在p标签中
可以通过footer标签标记引用源，原名称可以包含在cite标签中
在blockquote标签中添加class值为blockqute-reverse的内容可以实现文本内容的右对齐
效果图：

image.png

六、列表

1. 有序列表和无序列表

<div>
        <ul>
            <li>Javescript</li>
            <li>CSS</li>
            <li>HTMl</li>
        </ul>
    </div>
    <div>
        <ol>
            <li>Javescript</li>
            <li>CSS</li>
            <li>HTMl</li>
        </ol>
    </div>

这两种类型的列表和HTML默认的列表并没有太大区别，仅仅只是在margin上面稍作了修饰
效果如图：

image.png

2. 去点列表

<div>
        <ul>
            <li>Javescript</li>
            <li>CSS</li>
            <li>HTMl</li>
        </ul>
    </div>
    <div>
        <ul class="list-unstyled">
            <li>Javescript</li>
            <li>CSS</li>
            <li>HTMl</li>
        </ul>
    </div>

Bootstrap提供了一个class为list-unstyled的属性，可以去掉前面的.符号，对padding也做了相应的处理。
效果图：

image.png

3. 内联列表

div>
        <ul class="list-inline">
            <li>Javescript</li>
            <li>CSS</li>
            <li>HTMl</li>
        </ul>
    </div>

所谓内联列表就是将列表中的元素显示在一行，并且度每一个子元素的padding做了相应处理
效果图： image.png

4. 定义列表

Bootstrap中的定义列表和HTML中的用法相同，在默认样式上稍作了处理，调整了行间距外边距以及dt字体加粗的效果

<dl>
            <dt>第一项</dt>
            <dt>第二项</dt>
            <dt>第三项</dt>
        </dl>

image.png

5. 水平列表

这里的水平列表是针对定义列表的，在bootstrap中，class= ‘dl-horizontal’可以很方便的实现列表水平显示。

<dl >
            <dt>第一项</dt>
            <dd >javascript</dd>
            <dd>javascript</dd>
            <dd>javascript</dd>
        </dl>

        <dl class="dl-horizontal b">
            <dt class="b">第一项 第一项第一项第一项第一项第一项第一项第一项第一项</dt>
            <dd class="b">javascript</dd>
            <dd>javascript</dd>
            <dd>javascript</dd>
        </dl>

效果：

image.png
image.png
当屏幕宽度大于768px的视乎才会启用这个样式
如果dt中的内容超过了160px会显示省略号。

6. 代码

在页面上显示代码风格，有“code、pre、kbd、var。samp”几种风格

<p>在页面上显示代码风格，有“code、pre、kbd、var。samp”几种风格</p>
    <code>&it;div class="container"&gt;&lt;/div&gt;</code><br>
    <div class="pre-scrollable">
        <pre  >
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
        SELECT*FORM TempTable WHERE RowNumber
        pre代码中如果内容比较多则页面高度会撑得很大，bootstrap中提供了“.pre-scrollable”
        控制了最大高度为340px，超出则显示滚动条。
    </pre><br>
    </div>
    
    请输入<kbd>ctrl+c</kbd>来复制代码<br>
    <var>y</var>=<var>m</var><var>+</var><var>b</var><br>

运行结果：

image.png

七、表格

1.概述

table:基础表格
table-striped:斑马线表格
table-bordered：带边框的表格
table-hover：鼠标悬停高亮的表格
table-condensed:紧凑型表格
table-responsive：响应式表格

Attention：bootstrap还为表格中的tr提供了五种状态的样式类，分别控制着五种不同的背景颜色。

active：标志着当前活动的信息。
success：表示成功行为
info :表示普通中立的行为
warning：表示警告行为
danger：表示危险行为
（在表格应用当中，除了active，其他几个状态样式和table-hover一起使用的时候会受table-hover的影响）

2.基础表格

<table class="table">
        <thead>
            <tr>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
            </tr>
        </thead>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>

image.png
一个基础表格，三行两列。

2.斑马线表格

<table class="table table-striped">
        <thead>
            <tr>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
            </tr>
        </thead>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>

    </table>

添加class=‘table-striped’即可实现
应用到tbody中的行，tr中会间隔出现一个浅灰色的背景颜色
运行结果：

image.png

3.表格边框

<table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
            </tr>
        </thead>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>

    </table>

运行结果： image.png
添加table-bordered,表格出现所有框线

4.高亮行

<!-- 高亮行 -->
    <table class="table table-hover">
        <thead>
            <tr>
                <th>one</th>
                <th>two</th>
                <th>three</th>
            </tr>
        </thead>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

image.png
table-hover实现鼠标悬停高亮效果

5.紧凑型表格

<table class="table table-hover table-consensed">
        <thead>
            <tr>
                <th>one</th>
                <th>two</th>
                <th>three</th>
            </tr>
        </thead>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

image.png
通过table-condensed实现单元格内间距变小

5.响应式表格

<div class="table-responsive">
        <table class="table table-hover table-consensed">
        <thead>
            <tr>
                <th>one</th>
                <th>two</th>
                <th>three</th>
            </tr>
        </thead>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    </div>

image.png
通过将table放置于一个响应式容器div中，使用table-responsive达到响应式效果。当浏览器可视区域小于768px，表格底部出现水平滚动条，大于时则滚动条自动消失。

Bootstrap 排版

一、段落

二、文本对齐方式

三、字母大小写

四、abbr标签的title属性

五、引用样式

六、列表

1. 有序列表和无序列表

2. 去点列表

3. 内联列表

4. 定义列表

5. 水平列表

6. 代码

七、表格

1.概述

2.基础表格

2.斑马线表格

3.表格边框

4.高亮行

5.紧凑型表格

5.响应式表格

猜你喜欢

热点阅读

Bootstrap 排版

一、段落

二、文本对齐方式

三、字母大小写

四、abbr标签的title属性

五、引用样式

六、列表

1. 有序 列表和无序列表

2. 去点列表

3. 内联列表

4. 定义列表

5. 水平列表

6. 代码

七、表格

1.概述

2.基础表格

2.斑马线表格

3.表格边框

4.高亮行

5.紧凑型表格

5.响应式表格

猜你喜欢

热点阅读

1. 有序列表和无序列表