bootstrap排版

来源：互联网发布：python 乘法表对齐编辑：程序博客网时间：2024/05/07 19:55

（1）标题

1.主标题<h1>

bootstrap中定义了h1-h6六个class，为了让其他类型的标签也能使用标题样式

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>标题（一）</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><!--Bootstrap中让非标题元素和标题使用相同的样式--><div class="h1">Bootstrap标题一</div><div class="h2">Bootstrap标题二</div><div class="h3">Bootstrap标题三</div><div class="h4">Bootstrap标题四</div><div class="h5">Bootstrap标题五</div><div class="h6">Bootstrap标题六</div></body></html>

2.副标题<small>

主标题后往往还跟随着副标题，副标题默认为灰色

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>标题（二）</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><!--Bootstrap中使用了<small>标签来制作副标题--><h1>Bootstrap标题一<small>我是副标题</small></h1><h2>Bootstrap标题二<small>我是副标题</small></h2><h3>Bootstrap标题三<small>我是副标题</small></h3><h4>Bootstrap标题四<small>我是副标题</small></h4><h5>Bootstrap标题五<small>我是副标题</small></h5><h6>Bootstrap标题六<small>我是副标题</small></h6></body></html>

（2）段落

1.普通段落<p>

bootstrap为<p>增加了一些新的特性，比如2段之间有一定的空格

2.强调lead

为了强调内容，可以使用class lead

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>强调内容</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><p>我是一个普通的段落，我不需要强调显示</p><p class="lead">这部分内容需要特别的强调，我和别人长得不一样</p></body></html>

3.加粗<strong>

可以给字体加粗

4.斜体<em><i>

可以把字体变成斜体

5.通过颜色强调

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>强调相关的类</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><div class="text-muted">.text-muted 效果</div><div class="text-primary">.text-primary效果</div><div class="text-success">.text-success效果</div><div class="text-info">.text-info效果</div><div class="text-warning">.text-warning效果</div><div class="text-danger">.text-danger效果</div></body></html>

6.对齐方式

☑ .text-left：左对齐

☑ .text-center：居中对齐

☑ .text-right：右对齐

☑ .text-justify：两端对齐

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>文本对齐风格</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><p class="text-left">我居左</p><p class="text-center">我居中</p><p class="text-right">我居右</p><p class="text-justify">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></body></html>

（3）列表

1.无序、有序列表<ul><ol>

与普通html完全一致，只是做了部分优化

2.嵌套列表

在bootstrap中列表是可以嵌套的

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>普通列表、有序列表</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><h5>普通列表</h5><ul>    <li>列表项目</li>    <li>列表项目</li>    <li>列表项目</li>    <li>列表项目</li>    <li>列表项目</li></ul><h5>有序列表</h5><ol>      <li>项目列表一</li>      <li>项目列表二</li>      <li>项目列表三</li></ol><h5>有序列表嵌套</h5><ol>    <li>有序列表</li>    <li>    有序列表        <ol>        <li>有序列表(2)</li>        <li>有序列表(2)</li>        </ol>    </li>    <li>有序列表</li></ol></body></html>

3.去除列表前编号

在列表中使用.list-unstyled即可

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>去点列表</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><!--无序列表去点--><ul>    <li>    项目列表        <ul>        <li>带有项目符号</li>        <li>带有项目符号</li>        </ul>    </li>    <li>    项目列表        <ul class="list-unstyled">        <li>不带项目符号</li>        <li>不带项目符号</li>        </ul>    </li>    <li>项目列表</li></ul><!--有序列表去序号--><ol>    <li>    项目列表        <ol>        <li>带有项目编号</li>        <li>带有项目编号</li>        </ol>    </li>    <li>    项目列表        <ol class="list-unstyled">        <li>不带项目编号</li>        <li>不带项目编号</li>        </ol>    </li>    <li>项目列表</li></ol></body></html>

4.内联列表

也就是列表横着显示，使用.list-inline即可

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>内联列表</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><ul class="list-inline">    <li>W3cplus</li>    <li>Blog</li>    <li>CSS3</li>    <li>jQuery</li>    <li>PHP</li></ul></body></html>

（4）表格

1.表格<table>风格

☑ .table：基础表格

☑ .table-striped：斑马线表格（背景含有条纹）

☑ .table-bordered：带边框的表格

☑ .table-hover：鼠标悬停高亮的表格

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格（屏幕小时会增加滚动条，屏幕大了就不会有）

2.表格行<tr>风格

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>表格行的类</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><table class="table table-bordered table-hover">  <thead>    <tr>      <th>类名</th>      <th>描述</th>    </tr>  </thead>  <tbody>    <tr class="active">      <td>.active</td>      <td>表示当前活动的信息</td>    </tr>    <tr class="success">      <td>.success</td>      <td>表示成功或者正确的行为</td>    </tr>    <tr class="info">      <td>.info</td>      <td>表示中立的信息或行为</td>    </tr>    <tr class="warning">      <td>.warning</td>      <td>表示警告，需要特别注意</td>    </tr>    <tr class="danger">      <td>.danger</td>      <td>表示危险或者可能是错误的行为</td>    </tr>  </tbody></table> </body></html>

3.bootstrap风格的表格

bootstrap自己定义了表格标签，结构如下：

<table class="table"><thead><tr><th>表格标题</th>…</tr></thead><tbody><tr><td>表格单元格</td>…</tr>     …</tbody></table>

其中的class="table"不能少，否则完全无效果

0 0