你的位置:首页 > Java教程

[Java教程]【Bootstrap基础学习】02 Bootstrap的布局组件应用示例


字体图标的应用示例
<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>

导航

<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"  data-toggle="collapse"     data-target="#example-navbar-collapse">     <span ></span>     <span class="icon-bar"></span>     <span class="icon-bar"></span><!--下面有几个选项这里就有几个iconbar-->   </button>   <a class="navbar-brand" href="#">W3Cschool</a>  </div>  <div  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="#">&laquo;</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="#">&raquo;</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="#">&larr; Older</a></li> <li class="next"><a href="#">Newer &rarr;</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-width: 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="http://www.cnblogs.com//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">   &times;  </button>  成功!很好地完成了提交。</div><div class="alert alert-info alert-dismissable">  <button type="button" class="close" data-dismiss="alert"    aria-hidden="true">   &times;  </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">   &times;  </button>  警告!请不要提交。</div><div class="alert alert-danger alert-dismissable">  <button type="button" class="close" data-dismiss="alert"    aria-hidden="true">   &times;  </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="width: 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="width: 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="width: 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="width: 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="http://www.cnblogs.com//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="http://www.cnblogs.com//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="http://www.cnblogs.com//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="http://www.cnblogs.com//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="http://www.cnblogs.com//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写法看完,我觉得那一定进步比较大。