码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap3学习笔记:辅助样式

时间:2015-02-05 11:42:29      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
<meta charst="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- user-scalable=no 在移动设备浏览器上,禁止用户缩放(zooming) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
<title>Bootstrap基础练习</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的,如果不用可移除 -->
<!-- 注意:Respond.js不支持 file:// 方式的访问 -->
<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
	<!-- 辅助样式 -->
	<!-- 文本样式 -->
	<p class="text-muted">text-muted</p>
	<p class="text-primary">text-primary</p>
	<p class="text-success">text-success</p>
	<p class="text-info">text-info</p>
	<p class="text-warning">text-warning</p>
	<p class="text-danger">text-danger</p>
	<!-- 文本背景样式 -->
	<p class="bg-primary">Primary</p>
	<p class="bg-success">Success</p>
	<p class="bg-info">Info</p>
	<p class="bg-warning">Warning</p>
	<p class="bg-danger">Danger</p>
	<!-- 辅助图标 -->
	<!-- 关闭图标 -->
	<button type="button" class="close">按钮图标关闭</button>
	<a href="#" class="close">链接图标关闭</a>
	<!-- 向下箭头:直接在相应的span(或其他)元素使用.caret样式 -->
	<span class="caret"></span>
	<!-- 内容浮动 -->
	<p class="pull-left">向左浮动</p>
	<p class="pull-right">向右浮动</p>
	<p class="center-block">居中浮动</p>
	<div class="clearfix">清除浮动</div>
</body>
</html>


Bootstrap3学习笔记:辅助样式

标签:

原文地址:http://my.oschina.net/JeeChou/blog/375512

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!