@phper
2015-04-01T10:44:34.000000Z
字数 5337
阅读 5982
bootstrap
在慕课网上学习。这里就随便记一下:
bootstrap用了<h1>~<h6>
标签分别标题6个大小的标题:
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>
同时,bootstrap也使用 div class="h1~h6"
和上面的h1~h6
一模一样的显示效果:
<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>
bootstrap里也设定了副标题<small>
的用法,嵌套到<h1>~<h6>
里面,<small>
内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;同时颜色被设置为灰色(#999)
<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>
用<p>
标签来标记一个段落,字号为14px(font-size),行高为1.42857143(line-height),为深灰色(#333),字体为"Helvetica Neue", Helvetica, Arial, sans-serif;(font-family):
<p>超酷的互联网、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!</p>
可以在<p>
标签上加一个class = .lead
,就会字体比之前大了一点:
<p class="lead">我是特意要突出的文本,我的样子成这样。我是特意要突出的文本,我的样子长成这样。</p>
粗体用<b>
或者<strong>
标签来表示,相当于用了font-weight: bold;
<p>这是一段话<b>我是粗体</b></p>
<p>这是一段话<strong>我是粗体</strong></p>
<b>强调</b>
<strong>Bootstrap</strong>
在Bootstrap中可以通过使用标签<em>
或<i>
来实现斜体,相当于font-style:italic;
<p>我正在学习<em>Bootstrap</em>。我发现<i>Bootstrap</i>真的好强大。</p>
bootstrap 中有专门来强调字体颜色的class属性
。
有如下:
.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
<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>
<p class="text-danger">我是一段危险信息,请用Bootstrap框架中的危险风格显示</p>
效果为:
我是一段危险信息,请用Bootstrap框架中的危险风格显示
css中一般用text-align
来对齐,bootstrap抽象了几个class
来简化:
.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">我两端对齐</p>
效果如下:
我居左
我居中
我居右
我两端对齐
bootstrap里无序列表和有序列表也同样是用<ul><li>
和<ol><li>
,只不过对原生的做了若干改动:
所以我们写无序列表:
<h5>无序列表</h5>
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
效果如下图:
有序列表:
<ol>
<li>d1</li>
<li>d2</li>
<li>d3</li>
</ol>
效果是下面:
上面都是传统的列表,在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的,如果我们不想要那个黑点或者数字。可以加.list-unstyled
, 相当于加了padding-left: 0;list-style: none;
样式。
<ul class="list-unstyled">
<li>不带黑点</li>
<li>不带黑点</li>
</ul>
<ol class="list-unstyled">
<li>不带数字</li>
<li>不带数字</li>
</ol>
演示如下:
内联列表就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。通常用来做水平导航条。添加类名.list-inline
来实现内联列表:
<ul class="list-inline">
<li>个人中心</li>
<li>我的相册</li>
<li>我的说说</li>
<li>我的日志</li>
</ul>
效果像下面这样:
个人中心 我的相册 我的说说 我的日志
在css中我们用<dl><dt><dd>
来定义一个定义列表
, 在bootstrap中任然是用这个3个:
<dl>
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客</dd>
<dt>慕课网</dt>
<dd>一个真心在做教育的网站</dd>
</dl>
效果:
我们可以再<dl>
上加上<dl class="dl-horizontal">
这样,当屏幕尺寸大于768px的时候,<dt>
和<dd>
就水平显示在一行了。
<dl class="dl-horizontal">
<dt>W3cplus</dt>
<dd style="margin-left: 0";>一个致力于推广国内前端行业的技术博客</dd>
<dt>慕课网</dt>
<dd style="margin-left: 0";>一个真心在做教育的网站</dd>
</dl>
我们再bootstrap里写代码时候,是可以特殊标记出来,就像markdown一样,不过bootstrap里更强大:
1、使用
<code></code>
来显示单行内联代码
2、使用<pre></pre>
来显示多行块代码
3、使用<kbd></kbd>
来显示用户输入代码
其中,<code></code>
类似于markdown里的 `` , 只不过颜色是粉红色的 :
<code>php</code>
php
而 <kbd></kbd>
也类似于markdown里的 `` ,只不过颜色是黑色背景,白色字体:
<kbd>ctrl+c</kbd>
ctrl+c
<pre></pre>
来显示多行块代码,和markdown的回车+4个空格
效果一样:
<pre>
echo 2344;
var_dump(1234);
</pre>
效果:
echo 2344;
var_dump(1234);
我们可以在<pre>
上加一个pre--scrollable
,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
<pre class="pre-scrollable">
echo 2344;
var_dump(1234);
</pre>
表格也是平时用的居多的,bootstrap中的基础表格就是只要加个.table
class就可以了,所以它也是最简单的基础表格,但是bootstrap还是对它进行了优化,也是蛮舒适的看起来。
<table class="table">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
.table
主要有三个作用:给表格设置了margin-bottom:20px
以及设置单元内距,在thead底部设置了一个2px的浅灰实线
,每个单元格顶部设置了一个1px的浅灰实线
。效果如图,无边框:
斑马线就是在表格上,隔行的颜色不一样,这样立体感更强。bootstrap实现很简单,只需要在原先的.table
的基础上加上.table-striped
就可以了。
<table class="table table-striped">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
效果如图:
默认的表格外围和里面是不带边框的,要想加边框也巨简单,在原先的.table
的基础上加上.table-bordered
就可以了。
<table class="table table-bordered">
…
</table>
效果如图,是带有边框的。
当我们鼠标经过一行表格的时候,这一行就会变成高亮显示。也很简单。在原先的.table
的基础上加上.table-hover
就可以了。
<table class="table table-hover">
…
</table>
效果如图,鼠标经过后,这一行高亮显示:
上面的所有表格,他们行之间的间隔都很大。bootstrap还提供了一种比较紧凑型的。在原先的.table
的基础上加上.table-condensed
。加上后,明显紧凑了很多。
<table class="table table-condensed">
…
</table>
效果如图:行与行之间的间隙小了一圈
对比一下,原先的:
随着移动互联网的发展,越来越多的网站在手机上使用。所以。表格也需要根据屏幕来自适应变大变小。bootstrap中有个样式.table-responsive
就起作用了。它能自动识别窗口的大小来自动伸缩表格大小。
但是,注意的时,它不是加上<table>
上,而是必须在外面套一层div
,加到div
上:
<div class="table-responsive">
<table class="table table-bordered">
…
</table>
</div>
宽屏下,显示:
小屏幕下是这样的: