全面解析Bootstrap布局组件应用

前端技术 2023/09/02 JavaScript

本文示例介绍了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\">
     <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-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=\"/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=\"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=\"/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>

以上就是本文的全部内容，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/4417

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案