<!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>
bootstrap --字体图标的设置 按钮组件
最新推荐文章于 2022-11-03 10:48:53 发布