字体图标的应用示例
<button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes"></span> </button>
下拉菜单示例
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 主题 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">下拉菜单标题</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">选项1</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">选项2</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">选项3</a> </li> <li role="presentation" class="divider"></li><!--分割线--> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">分离的链接</a> </li> </ul> </div>
按钮工具栏与按钮组
<div class="btn-toolbar" role="toolbar"><!--用来嵌套btn-group--> <div class="btn-group btn-group-lg"> <!--btn-group-lg用来控制按钮组的大小,bt-group-vertical是垂直的按钮组,bt-group也可以嵌套bt-group--> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">Button 4</button> <button type="button" class="btn btn-default">Button 5</button> <button type="button" class="btn btn-default">Button 6</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">Button 7</button> <button type="button" class="btn btn-default">Button 8</button> <button type="button" class="btn btn-default">Button 9</button> </div> </div>
按钮下拉菜单
<div class="btn-group"><!--加类.dropup可以变成按钮上拉菜单--> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <!-- 加类.btn-xs之类的东西改变按钮大小--> 默认 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li><!--分割线--> <li><a href="#">分离的链接</a></li> </ul> </div>
表单中的输入框组
<form class="bs-example bs-example-form" role="form"> <div class="input-group input-group-lg"><!--input-group-lg调整输入框组大小--> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <br> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"><!--复选框和单选框都能应用于输入框组--> </span> <input type="text" class="form-control"> </div> <br> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"><!--按钮也能应用于输入框组请注意这里的类变为了input-group-btn，甚至可以加上前面的按钮下拉菜单--> <button class="btn btn-default" type="button"> Go! </button> </span> </div> </form>
导航（tab标签页）
<p>标签式的导航菜单</p> <ul class="nav nav-tabs"><!--加上类nav-justified可以让导航两端对齐--> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> </ul> <p>基本的胶囊式导航菜单</p> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> </ul> <p>垂直的胶囊式导航菜单</p> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> </ul>
导航栏
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <ul class="nav navbar-nav"><!--.navbar-fixed-top和.navbar-fixed-bottom可以使导航栏固定在顶部和底部， .navbar-static-top会使导航栏随页面滚动吗， .navbar-inverse实现背景颜色和文字颜色互换--> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </li> </ul> <!--导航栏中的表单--> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">提交</button> </form> <!--导航栏按钮--> <button type="button" class="btn btn-default navbar-btn"> 导航栏按钮 </button> <!--导航栏文本--> <div class="navbar-text navbar-right"> <p >导航栏文本 <a href="#" class="navbar-link">我是链接</a></p> </div> <!--navbar-left和navbar-right可以实现向左和向右对齐--> </div> </nav>
响应式的导航栏
以下金黄色部分为对一般的导航栏的区别
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span><!--下面有几个选项这里就有几个iconbar--> </button> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li><a href="#">Troy</a></li> </ul> </div> </nav>
面包屑导航
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">2013</a></li> <li class="active">十一月</li> </ol>
分页和翻页
<!--以下所有示例都可以用disabled和active类来控制激活和禁用--> <!--分页--> <ul class="pagination"><!--pagination-sm和pagination-lg来控制分页的大小--> <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> <!--翻页--> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> <!--翻页--> <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>
标签
<span class="label label-default">默认标签</span> <span class="label label-primary">主要标签</span> <span class="label label-success">成功标签</span> <span class="label label-info">信息标签</span> <span class="label label-warning">警告标签</span> <span class="label label-danger">危险标签</span>
徽章
徽章比标签更圆滑，主要用于突出显示新的或未读的项
<ul class="nav nav-pills nav-stacked" style="max- 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> 首页 </a> </li> <li><a href="#">简介</a></li> <li> <a href="#"> <span class="badge pull-right">3</span> 消息 </a> </li> </ul>
超大屏幕
<div class="jumbotron"> <div class="jumbotron"> <h1>欢迎登陆页面！</h1> <p>这是一个超大屏幕（Jumbotron）的实例。</p> <p><a class="btn btn-primary btn-lg" role="button"> 学习更多</a> </p> </div> </div> <!--翻过来jumbotron包着jumbotron就会得到一个不带圆角且占更多宽度的超大屏幕-->
页面标题示例
<div class="page-header"> <h1>页面标题实例 <small>子标题</small> </h1> </div>
缩略图
<div href="#" class="thumbnail"> <img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> </div> <div class="caption"> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a> <a href="#" class="btn btn-default" role="button"> 按钮 </a> </p> </div>
警告
<div class="alert alert-success alert-dismissable"><!--alert-dismissable为可删除警告--> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 成功！很好地完成了提交。 </div> <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> <a href="#" class="alert-link">成功！很好地完成了提交。</a><!--警告中的标签--> </div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 警告！请不要提交。 </div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 错误！请进行一些更改。 </div>
进度条
<!--一般进度条--> <div class="progress progress-striped active"><!--progress-striped为加条纹,加active条纹会产生动画效果--> <!--progress-bar-info progress-bar-warning progress-bar-danger progress-bar-success 会给进度条不同颜色，不加就是最基本的--> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 90%;"> <span class="sr-only">90% 完成（成功）</span> </div> </div> <!---堆叠的进度条--> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 40%;"> <span class="sr-only">40% 完成</span> </div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 30%;"> <span class="sr-only">30% 完成（信息）</span> </div> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 20%;"> <span class="sr-only">20% 完成（警告）</span> </div> </div>
媒体标签
- .media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
- .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
<ul class="media-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div class="media-body"> <h4 class="media-heading">媒体标题</h4> <p>这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。</p> <!-- 嵌套的媒体对象 --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div class="media-body"> <h4 class="media-heading">嵌套的媒体标题</h4> 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 <!-- 嵌套的媒体对象 --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div class="media-body"> <h4 class="media-heading">嵌套的媒体标题</h4> 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 </div> </div> </div> </div> <!-- 嵌套的媒体对象 --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div class="media-body"> <h4 class="media-heading">嵌套的媒体标题</h4> 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 </div> </div> </div> </li> <li class="media"> <a class="pull-right" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div class="media-body"> <h4 class="media-heading">媒体标题</h4> 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 </div> </li> </ul>
列表组
<!--一般列表组--> <ul class="list-group"> <li class="list-group-item">免费域名注册</li> <li class="list-group-item"> <span class="badge">新</span> 24*7 支持 </li> <li class="list-group-item">每年更新成本</li> <li class="list-group-item"> <span class="badge">新</span> 折扣优惠 </li> </ul> <!--自定义列表组--> <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading"> 入门网站包 </h4> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 免费域名注册 </h4> <p class="list-group-item-text"> 您将通过网页进行免费域名注册。 </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 24*7 支持 </h4> <p class="list-group-item-text"> 我们提供 24*7 支持。 </p> </a> </div>
面板
<div class="panel panel-default"><!--可替代panel-default的类：panel-primary，panel-success，panel-info，panel-warning，panel-danger--> <div class="panel-heading"> <h3 class="panel-title"> 带有 title 的面板标题 </h3> </div> <div class="panel-body"> 面板内容 </div> <!---带表格--> <table class="table"> <th>产品</th><th>价格 </th> <tr><td>产品 A</td><td>200</td></tr> <tr><td>产品 B</td><td>400</td></tr> </table> <!---带列表组--> <ul class="list-group"> <li class="list-group-item">免费域名注册</li> <li class="list-group-item">免费 Window 空间托管</li> <li class="list-group-item">图像的数量</li> <li class="list-group-item">24*7 支持</li> <li class="list-group-item">每年更新成本</li> </ul> <div class="panel-footer">面板脚注</div> </div>
well效果
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>
<div class="well well-lg">您好，我在大的 Well 中！</div> <div class="well well-sm">您好，我在小的 Well 中！</div>
好了，终于从某网站上把示例都玩了一遍，啊，我的天。
算是自己都玩了一遍，每个示例类都用了一遍，如果是专业的前端什么的，把这些类的具体CSS写法看完，我觉得那一定进步比较大。