全面解析Bootstrap布局组件应用

本文示例介绍了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>

导航（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"&g