-
.text-muted：提示，使用浅灰色（#999） .text-primary：主要，使用蓝色（#428bca） .text-success：成功，使用浅绿色(#3c763d) .text-info：通知信息，使用浅蓝色（#31708f） .text-warning：警告，使用黄色（#8a6d3b） .text-danger：危险，使用褐色（#a94442）查看全部
-
除了用加粗来强调突出的文本之外，还可以使用斜体。斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签<em>或<i>来实现。查看全部
-
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。 Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。查看全部
-
使用了<small>标签来制作副标题。 直接写在<h1>~<h6>标签的里面，显示在同一行。 <small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；查看全部
-
<meta name="viewport" content="width=device-width, initial-scale=1"> 初始化移动浏览器显示 当前宽度等于设备的宽度查看全部
-
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 在IE运行最新的渲染模式查看全部
-
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>查看全部
-
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 --> <!--[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]-->查看全部
-
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码： <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>查看全部
-
<h5>层叠条纹进度条</h5> <div class="progress"> <div class="progress-bar progress-bar-success" ></div> <div class="progress-bar progress-bar-info" ></div> <div class="progress-bar progress-bar-warning" ></div> </div> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" ></div> <div class="progress-bar progress-bar-info progress-bar-striped" ></div> <div class="progress-bar progress-bar-striped progress-bar-warning" ></div> </div>查看全部
-
<h1>复杂的缩略图</h1> <div class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" alt=""> </a> <div class="caption"> <h3>Bootstrap框架系列教程</h3> <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p> <p> <a href="##" class="btn btn-primary">开始学习</a> <a href="##" class="btn btn-info">正在学习</a> </p> </div> </div>查看全部
-
<body> <!--代码--> <ul class="pager"> <li><a href="#">«上一页</a></li> <li><a href="#">下一页»</a></li> </ul> <!--左右对齐--> <ul class="pager"> <li class="previous"><a href="#">«上一页</a></li> <li class="next"><a href="#">下一页»</a></li> </ul> <!--禁止状态--> <ul class="pager"> <li class="disabled"><span>«上一页</span></li> <li><a href="#">下一页»</a></li> </ul>查看全部
-
分页导航： <ul class="pagination pagination-lg"> <li><a href="#">«第一页</a></li> <li><a href="#">11</a></li> <li><a href="#">12</a></li> <li class="active"><a href="#">13</a></li> <li><a href="#">14</a></li> <li><a href="#">15</a></li> <li class="disabled"><a href="#">最后一页»</a></li> </ul>查看全部
-
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 --> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 --> <a href="##" class="navbar-brand">慕课网</a> </div> <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 --> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li> <li><a href="##">系列教程</a></li> </ul> </div> </div>查看全部
-
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">慕课网</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> <li><a href="##">JavaScript</a></li> <li class="disabled"><a href="##">PHP</a></li> </ul> </li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">关于我们</a></li> </ul> </div>查看全部
举报
0/150
提交
取消