Bootstrap 레이아웃 구성 요소 application_javascript 기술 종합 분석

본 글의 예시는 부트스트랩 레이아웃 컴포넌트의 적용을 소개하며, 참고용으로 모두에게 공유합니다

글꼴 아이콘 적용 예시

<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" 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="#">&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="/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: 이 클래스를 사용하면 미디어 개체의 멀티미디어(이미지, 비디오, 오디오)가 콘텐츠 블록의 왼쪽이나 오른쪽에 떠 있을 수 있습니다.
.media-list: 각 항목이 순서가 지정되지 않은 목록의 일부인 목록이 필요한 경우 이 클래스를 사용할 수 있습니다. 댓글 목록 및 기사 목록에 사용할 수 있습니다.

<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은 콘텐츠가 움푹 들어가거나 그림으로 표시되도록 하는 컨테이너입니다.

<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.