Bootstrap学习笔记—关于Glyphicons 字体图标

Bootstrap学习笔记—关于Glyphicons 字体图标

1、代码：

<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-2 col-xs-4">
<button type="button" class="btn-info btn-block">
<span class="glyphicon glyphicon-home test"></span>
<div class="caption">
<h5>01</h5>
</div>
</button>
</div>
<div class="col-md-2 col-xs-4 col-md-offset-1">
<button type="button" class="btn-info btn-block ">
<span class=" glyphicon glyphicon-flag test"></span>
<div class="caption">
<h5>02</h5>
</div>
</button>
</div>
<div class="col-md-2 col-xs-4 col-md-offset-1">
<button type="button" class="btn-info btn-block">
<span class=" glyphicon glyphicon-grain test"></span>
<div class="caption">
<h5 class="caption_font">03</h5>
</div>
</button>
</div>
</div>
<br /><br />
<div class="row">
<div class="col-md-offset-2 col-md-2 col-xs-4">
<button type="button" class="btn-info btn-block">
<span class="glyphicon glyphicon-hand-right test">  </span>
<div class="caption">
<h5>04</h5>
</div>
</button>
</div>
<div class="col-md-2 col-xs-4 col-md-offset-1">
<button type="button" class="btn-info btn-block">
<span class="glyphicon glyphicon-star test"></span>
<div class="caption">
<h5>05</h5>
</div>
</button>
</div>
<div class="col-md-2 col-xs-4 col-md-offset-1">
<button type="button" class="btn-info btn-block">
<span class="glyphicon glyphicon-cutlery test"></span>
<div class="caption">
<h5>06</h5>
</div>
</button>
</div>
</div>
</div>

注释：

1、引入想要的字体图标，将其放入button中

<button type="button" class="btn-info btn-block">
<span class="glyphicon glyphicon-home test"></span>
<div class="caption">
<h5>01</h5>
</div>
</button>

2、通过

col-md-offset-2 col-md-2

改变图标每行的个数

3、新增自定义类名

span class="glyphicon glyphicon-home test"

.test，以便自定义css，改变按钮大小

css：

.test
{
height: 50px;
font-size: 40px;
padding-top: 10px;
}

4、适应不同屏幕大小而进行不同的定义：

@media screen and (max-width: 768px)
{
.test
{
height: 76px;
font-size: 40px;
padding-top: 10px;
}
}

5、新加类名.test后可以自行定义合适的格式

6、媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }