网站前端_Bootstrap排版/列表/表格/表单/按钮/图像1-白红宇

网站前端_Bootstrap排版/列表/表格/表单/按钮/图像1

阅读量：6905 次

发布时间：2019-06-27

本文共 6927 字，大约阅读时间需要 23 分钟。

通用技能:

# 文档类型

<!DOCTYPE html>

<html lang="zh-cn">

</html>

说明: 由于BootStrap基于,所以所有的HTML文件都需要在其顶部引用的DOCTYPE属性.

# 移动先行

1 2	`<meta` `name="viewport"` `content="width=device-width, initial-scale=1.0">` `<meta` `name="viewport"` `content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">`

说明: 由于BootStrap以移动端优先,所以可通过一些viewport特性来设置移动端行为,如上可实现内容宽度与设备宽度1:1,最大缩放为屏幕宽度,且禁用用户缩放功能,防止用户触发缩放而导致出现滚动条

# 响应图片

1	`<img` `class="img-responsive"` `src="img/screen.jpg"` `alt="">`

说明: 为了实现容器内图片大小缩放自适应,BootStrap3中只需为图片加img-responsive类即可,其实实现方式非常简单只要设置了max-width: 100%;和height: auto;即可

# 居中容器

1	`<div` `class="container"></div>`

说明: 一个页面或元素要居中显示,可以在外部容器上简单应用.类即可,它其实由一个max-width属性来限制删栏系统的最大宽度,默认容器左右内边距15px,当然都可以后期重载覆盖这些值

排版技能:

# 标题相关

<h1>有上下边距的h1 <small>小号有上下边距的h1</small></h1>

<h2>有上下边距的h1 <small>小号有上下边距的h2</small></h2>

<h3>有上下边距的h1 <small>小号有上下边距的h3</small></h3>

<h4>有上下边距的h1 <small>小号有上下边距的h4</small></h4>

<h5>有上下边距的h1 <small>小号有上下边距的h5</small></h5>

<h6>有上下边距的h1 <small>小号有上下边距的h6</small></h6>

<span class="h1">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>

<span class="h2">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>

<span class="h3">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>

<span class="h4">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>

<span class="h5">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>

<span class="h6">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>

说明: BootStrap重定义h1~h6可直接使用,也可以作为非标题元素的类,但前者默认有上下外边距,而后者没有,常常配合使用的是在内部使用<small></small>,以便显示稍微小一点儿的字体,且字体颜色被设置为灰色(#999999)

# 页面主题

1 2	`<p>下外边距为10px的p</p>` `<p` `class="lead">突出显示下外边距为10px的p</p>`

说明: BootStrap默认全局设置字体大小14px,行高20px,p元素段落会有一个额外的下外边距,大小为行间距的一半,10px,如果想让一个段落突出显示,可加lead类,会增大字体大小,粗细,行间距,和下外边距

# 强调文本

<strong>字体加粗效果</strong> <br>

<em>字体倾斜效果</em> <br>

<cite>字体引用效果</cite> <br>

<small>小号字体效果</small> <br>

<div class="text-left">文本左对齐效果</div>

<div class="text-right">文本右对齐效果</div>

<div class="text-center">文本居中对齐效果</div>

<div class="text-justify">文本平均分布效果</div>

说明: BootStrap将默认的文本强调元素<small></small> <strong></strong> <em></em> <cite></cite>以及文本对齐都进行了轻量级的实现.

# 缩略语句

1	`<abbr` `class="initialism"` `title="自动化运维开发">DEVOPS</abbr>`

说明: BootStrap在abbr元素上实现了缩略词功能,鼠标移动到缩略词上时缩略词下有虚横线且显示声明的title的属性值,光标变帮助,另一种是通过添加initialism类,但是似乎只是字体小一点儿.

# 地址元素

<div class="container">

<footer>

<address class="text-center">

<h5><a href="#">在线反馈</a></h5>

</address>

<address class="text-center">

</address>

<address class="text-center">

<h4><small>ICP证粤B2-20090191，京公网安备 11000002000013号</small></h4>

</address>

</footer>

</div>

说明: BootStrap在address元素上实现了简单通用的样式,设置下外边距20px,行高20px,非常方便的加个样式实现火狐中文网的底部版权样式.

# 引用内容

<div class="container">

<header>

<blockquote>

<small>主机信息</small>

</blockquote>

</header>

<section>

信息页面

</section>

</div>

说明: BootStrap在blockquota元素上实现了引用,可以引用任意HTML内容,但一般推荐使用<p></p>,在内部使用<small></small>文字前面会加-作为注释,常常配合<small></small>和<em></em>和<cite></cite>一起使用,当然还可以配合text-right/pull-right来右对齐,以适应不同的排版方式

# 普通列表

<ul>

<li>个人信息:

<ul>

<li>姓名: 李满满</li>

<li>性别: 男</li>

<li>年龄: 25</li>

</ul>

</li>

</ul>

说明: BootStrap在ul/ol和li元素上做了细微的优化,ul上外边距设为0px,除了最后一个ul,所有的ul下外边距默认设置为10px.

# 有序列表

<ol>

<li>构建自动化运维平台</li>

<li>设计RESTful API</li>

</ol>

# 去点列表

<ul class="list-unstyled">

<li>个人信息:

<ul>

<li>姓名: 李满满</li>

<li>性别: 男</li>

<li>年龄: 25</li>

</ul>

</li>

</ul>

说明: BootStrap的list-unstyled类只会去除当前被选择的元素列表项前面的圆点,而不会作用于其子元素,其实设置的是ul的padding-left: 0;list-style: none;所以要注意ul的内左边距被设置为0px.

# 内联列表

<div class="container">

<header>

<ul class="list-inline">

<li><a href="#">主页</a></li>

<li><a href="#">日志</a></li>

<li><a href="#">照片</a></li>

</ul>

</header>

</div>

说明: BootStrap的list-inline类用于实现内联样式表,也就是将列表项水平显示,常用于菜单,默认设置ul的padding-left: 0;list-stype:none;子li除了第一个设置了padding-left:0;其它的都默认左右各5px,所以很多时候做菜单需要我们自定义覆盖该默认样式.

# 定义列表

<dl>

<dt>个人信息:</dt>

<dd>姓名: 李满满</dd>

<dd>性别: 男</dd>

<dd>年龄: 25</dd>

</dl>

说明: BootStrap对默认的dl定义列表也做了一些轻微的调整,主要是dl设置margin-top: 0;margin-bottom: 20px;对于dd设置margin-left: 0;导致dt和dd内容左对齐,所以常常需要自定义覆盖样式.

# 水平定义

<dl class="dl-horizontal">

<dt>姓名:</dt>

<dd>李满满</dd>

<dt>年龄:</dt>

<dd>25</dd>

<dt>性别:</dt>

<dd>男</dd>

</dl>

说明: BootStrap的dl-horizontal类默认使得dl下的dt和dd列表水平显示,但由于对dt设置width: 160px;text-align:right;对dd设置margin-left: 180px;所以dt和dd并排显示且中间间隔20px,但是dt的内容右对齐导致左边可能出现大片空白区,所以可能需要自定义覆盖样式

# 内联代码

1	`<code><div id="container"><div></code> <br> <br>`

说明: BootStrap对默认的code设置了浅红背景和其内部深红字体

# 输入代码

1	`<kbd><div id="container"><div></kbd> <br> <br>`

说明: BootStrap对默认的kbd设置了深黑色背景和内部白颜色字体

# 多行代码

<pre class="pre-scrollable">

import os

if __name__ == '__main__':

if os.path.exists('/etc/passwd'):

print 'found notice: passwd file is exists!'

else:

print 'found errors: passwd file no exists!'

</pre> <br> <br>

说明: BootStrap默认对可显示大块代码段,并保证原有格式不变,另外可在pre元素上应用.pre-scollable样式,则可控制该区域最大高度为340像素,并可在y轴方向滚动.

# 基础表格

<table class="table">

<thead>

<tr>

<th>#</th>

<th>姓名</th>

<th>年龄</th>

<th>职业</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>李满满</td>

<td>25</td>

<td>运维开发工程师</td>

</tr>

</tbody>

</table>

说明: BootStrap默认提供表格的基础样式table类,默认table设置margin-bottom:20px;th和td设置padding: 8px;border-top: 1px solid #ddd;使得table下外边距20px,所有的th/td内边距8px且拥有一个1px的上边框,最后对于thead中的th设置border-bottom: 2px solid #ddd;使其有一个2px的粗边框.

# 条纹表格