您的位置：首页 > Web前端 > BootStrap

bootstrap --字体图标的设置 按钮组件

2015-05-17 13:38 741 查看 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--媒体查询-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
    为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--禁止缩放-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
    <<title></title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--如果ie的版本小于9,让ie8识别html5,同时识别媒体查询语句-->
    <!--[if lt IE 9]
        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    -->

</head>
<body>
   <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
   <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
   <!-- 加载Bootstrap核心库 -->
   <script src="js/bootstrap.min.js"></script>

<!--
  容器：
  container（固定宽度）: 类用于固定宽度并支持响应式布局的容器。
 .container-fluid(百分比) 类用于 100% 宽度，占据全部视口（viewport）的容器。
-->
<!-- 字体图标:放在一个span标签里面，加上相应的class（类名即官网下面图标的文字）即可-->
<span  class="glyphicon glyphicon-euro"></span>

<!--
按钮：7种按钮样式，都以class btn开头
-->
   <!-- 默认的按钮效果：btn btn-default -->
   <button type="button" class="btn btn-default">（默认样式）Default</button>
   <!-- 蓝色 -->
   <button type="button" class="btn btn-primary">（首选项）Primary</button>
   <!--成功-->
   <button type="button" class="btn btn-success">（成功）Success</button>
   <!--浅蓝色：信息 -->
   <button type="button" class="btn btn-info">（一般信息）Info</button>
   <button type="button" class="btn btn-warning">（警告）Warning</button>
   <!-- Indicates a dangerous or potentially negative action -->
   <button type="button" class="btn btn-danger">（危险）Danger</button>
   <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
   <button type="button" class="btn btn-link">（链接）Link</button>

<!--
  按钮的尺寸:使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
-->
      <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
     <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
<!--
   按钮的激活状态：active  表示按钮激
-->
  <p> <button type="button" class="btn btn-danger active">（危险）Danger</button></p>

 <!--将a链接渲染成btn :指定role为button-->
<p>
    <a href="#" class="btn btn-primary active" role="button">Primary link</a>
    <a href="#" class="btn btn-danger active" role="button">Link</a>
</p>
<!--
如何在按钮的前面显示一个图标：在btn中间夹个span,然后把图标放到span里面即可
-->
   <p>
       <button type="button" class="btn btn-default btn-lg"><span  class="glyphicon glyphicon-euro"></span>（大按钮）Large button</button>
   </p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航