Bootstrap中文本的样式
2015-11-12 13:33
369 查看
在Bootstrap中对文本的对有很多的关注,也给出了很多的样式,至少在我们自己写网页的时候这些可以不用再去编写这些样式,其实在之前我一直没有很好的理解类,这些其实都是类,我们给class进行赋值其实也是对赋给他一个类或者是赋给他一个选择器。在Bootstrap中我们队文本进行设置的类有哪些,或者是我们可以给class赋哪些值可以达到我们想要的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<title>Bootstrap 文本</title>
</head>
<body>
<div class="container">
<h2>文本</h2>
<p class="text-muted">该段落使用了样式"text-muted".</p>
<a href="http://www.w3cschool.cc" class="text-muted">链接使用了样式"text-muted"</a>
<p class="text-primary">该段落是使用了样式"text-primary"</p>
<a href="http://www.w3cschool.cc" class="text-primary">链接使用该样式</a>
<p class="text-success">该段落使用了样式"text-success"</p>
<a href="http://www.w3cschool.cc" class="text-success">该链接使用了样式</a>
<p class="text-info">该段落使用了样式"text-info"</p>
<a href="http://www.w3cschool.cc" class="text-info">该链接使用了样式</a>
<p class="text-warning">该段落使用使用了text-warning</p>
<a href="http://www.w3cschool.cc" class="text-warning">该链接使用了样式</a>
<p class="text-danger">该段落使用了text-danger</p>
<a href="http://www.w3cschool.cc" class="text-danger">该链接使用了样式</a>
</div>
</body>
</html>
在这个程序中我们使用的样式有text-muted,text-success,text-danger,text-warning,text-info,text-primary。
文本样式当然做出了适当的改变,具体是哪些地方做出了改变,我也没有办法描述,在实际的工作中我们也许会一个一个的进行试验,当出现合适的就去选择。在这个地方我们仅仅是要熟悉存在这些样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<title>Bootstrap 文本</title>
</head>
<body>
<div class="container">
<h2>文本</h2>
<p class="text-muted">该段落使用了样式"text-muted".</p>
<a href="http://www.w3cschool.cc" class="text-muted">链接使用了样式"text-muted"</a>
<p class="text-primary">该段落是使用了样式"text-primary"</p>
<a href="http://www.w3cschool.cc" class="text-primary">链接使用该样式</a>
<p class="text-success">该段落使用了样式"text-success"</p>
<a href="http://www.w3cschool.cc" class="text-success">该链接使用了样式</a>
<p class="text-info">该段落使用了样式"text-info"</p>
<a href="http://www.w3cschool.cc" class="text-info">该链接使用了样式</a>
<p class="text-warning">该段落使用使用了text-warning</p>
<a href="http://www.w3cschool.cc" class="text-warning">该链接使用了样式</a>
<p class="text-danger">该段落使用了text-danger</p>
<a href="http://www.w3cschool.cc" class="text-danger">该链接使用了样式</a>
</div>
</body>
</html>
在这个程序中我们使用的样式有text-muted,text-success,text-danger,text-warning,text-info,text-primary。
文本样式当然做出了适当的改变,具体是哪些地方做出了改变,我也没有办法描述,在实际的工作中我们也许会一个一个的进行试验,当出现合适的就去选择。在这个地方我们仅仅是要熟悉存在这些样式。
相关文章推荐
- [bootstrap] 栅格系统和布局
- bootstrap图片轮播
- BootStrap学习(7)_轮播图
- Bootstrap 教程
- 快速理解bootstrap,bagging,boosting-三个概念
- Bootstrap布局
- Bootstrap之侧边导航菜单(可折叠分组)
- Bootstrap之表格checkbox复选框全选
- bootstrap 下拉菜单不显示的解决办法
- buttons.css——可以与bootstrap融合的按钮样式库
- 04 bootstrap "模态框跳转到当前模板页面, 框消失了, 而背景依然存在问题"
- BootStrap学习(6)_模态框
- [bootstrap] bootstrap 简介和相关网址
- BootStrap学习(5)_多媒体对象&列表组
- Bootstrap按钮
- 使用 Bootstrap 快速开发网站和 Web 应用程序
- bootstrap在线模板
- bootstrap如何把表单select input button弄在一行
- Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)
- bootstrap估计和bootstrap估计的Monte Carlo近似