bootstrap3的jumbotron和glyphicon glyphicon-*的用法
2013-11-23 19:08
176 查看
bootstrap3jumbotronglyhiconglyhicon-
1、jumbotron相对应的2.3的版本是hero-unit
2、glyphicon-* 相对应的2.3版本是icon-*
用glyphicon-*的时候要注意写作方式,这个方式的必须在引用图标时候前面必须加个glyphicon
例如:<div class="glyphicon glyphicon-circle-arrow-right"></div>
3、实验代码:
[html]
view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
![](https://code.csdn.net/assets/ico_fork.svg)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.css" >
<script src="dist/js/bootstrap.js"></script>
<title>无标题文档</title>
</head>
<body style="margin:100px;">
<div class="jumbotron">
<h1 class="glyphicon glyphicon-circle-arrow-right">这个是glyphicon</h1>
<p>这个大框是jumbotron</p>
</div>
</body>
</html>
4、效果图:
1、jumbotron相对应的2.3的版本是hero-unit
2、glyphicon-* 相对应的2.3版本是icon-*
用glyphicon-*的时候要注意写作方式,这个方式的必须在引用图标时候前面必须加个glyphicon
例如:<div class="glyphicon glyphicon-circle-arrow-right"></div>
3、实验代码:
[html]
view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.css" >
<script src="dist/js/bootstrap.js"></script>
<title>无标题文档</title>
</head>
<body style="margin:100px;">
<div class="jumbotron">
<h1 class="glyphicon glyphicon-circle-arrow-right">这个是glyphicon</h1>
<p>这个大框是jumbotron</p>
</div>
</body>
</html>
4、效果图:
相关文章推荐
- bootstrap3的jumbotron和glyphicon glyphicon-*的用法
- Bootstrap的用法
- bootstrap-分裂式菜单(向上、向下),输入框组, form基本用法
- bootstrap 一些有趣的用法
- MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上)
- bootstrap2和bootstrap3的用法区别概述(四)
- Bootstrap前端框架----css样式的一些用法(排版)
- Bootstrap基础5——well和jumbotron容器
- bootstrap datetimepicker的用法以及小箭头不能显示的问题
- bootstrap之$.Event用法
- bootstrap-wysiwyg中JS控件富文本的用法
- Bootstrap中的datetimepicker用法总结
- bootstrap2和bootstrap3的用法区别概述(二)
- bootstrap插件bootstrap-select用法
- bootstrap-datetimepicker的基本用法
- bootstrap 中的弹出窗口popover的用法
- Bootstrap模态对话框用法简单示例
- bootstrap 提示框插件 bootstrap-growl 和bootstrap-notify用法简介
- BootStrap网页中代码显示<code><pre>用法详解
- MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下)