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) { ... }