-
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
查看全部 -
斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签<em>或<i>来实现。
查看全部 -
使用<b>和<strong>标签让文本直接加粗。
查看全部 -
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
查看全部 -
1、全局文本字号为14px(font-size)。
2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。
3、颜色为深灰色（#333）；
4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。
查看全部 -
使用<small>标签来制作副标题。
查看全部 -
Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式。
查看全部 -
按钮大小默认有四种规格：
<button class="btn btn-lg btn-success" type="button">大型按钮</button>
<button class="btn btn-success" type="button">正常按钮</button>
<button class="btn btn-sm btn-success" type="button">小型按钮</button>
<button class="btn btn-xs btn-success" type="button">超小型按钮</button>
查看全部 -
<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>
查看全部 -
响应式导航条：
使用方法：
1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
2、保证在窄屏时要显示的图标样式（固定写法）：
<button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。
<div class="navbar navbar-default" role="navigation"><!--反色导航条:将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。-->
<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>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</div>
查看全部 -
table中,只需要在tr中添加上一下class，就能简单的显示出五种不同的颜色
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告，需要特别注意
.danger 表示危险或者可能是错误的行为
如图：
查看全部 -
基础导航条：
<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><a href="#">系列教程</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">名师介绍<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active"><a href="#">小白</a></li>
<li><a href="#">小黑</a></li>
<li><a href="#">阿尤</a></li>
<li class="disabled"><a href="#">米果不想教了</a></li>
</ul>
</li>
<li><a href="#">成功案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<!-- 在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单。在"navbar-form"类再添加"navbar-left”让表单左浮动，更好实现对齐。“navbar-right”样式，让元素在导航条靠右对齐（
注意："navbar-left”"navbar-lright”这里有一个条件，只有当浏览器视窗宽度大于768px生效。
）。-->
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
查看全部 -
#按钮（等分按钮）实现自适应按钮
等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名，如下所示：
<div class="btn-wrap"> <div class="btn-group btn-group-justified"> <a class="btnbtn-default" href="#">首页</a> <a class="btnbtn-default" href="#">产品展示</a> <a class="btnbtn-default" href="#">案例分析</a> <a class="btnbtn-default" href="#">联系我们</a> </div> </div>
运行效果如下：
查看全部 -
按钮（嵌套分组）.btn-group 可实现导航条效果，
使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。如下所示：
<div class="btn-group">/* 把class的btn-group改为btn-group-vertical 使按钮组垂直显示*/
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">公司简介</a></li>
<li><a href="##">企业文化</a></li>
<li><a href="##">组织结构</a></li>
<li><a href="##">客服服务</a></li>
</ul>
</div>
</div>
下面是向上弹起菜单的例子：
<div class="btn-group "> /* 在btn-group基础上添加dropup可实现向上弹起菜单 */ <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> </ul> </div>
运行效果如下：
查看全部 -
WAI-ARIA无障碍网页应用属性完全展示 « 张鑫旭-鑫空间-鑫生活 https://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%e6%97%a0%e9%9a%9c%e7%a2%8d%e9%98%85%e8%af%bb/
查看全部
举报