ブートストラップグリッドシステムの勉強ノート-PHP开发-php.cn

ブートストラップグリッドシステムの勉強ノート

高洛峰

リリース： 2016-12-05 13:21:24

オリジナル

1690 人が閲覧しました

Bootstrap グリッドシステムについてどのくらい知っていますか?

1. はじめに
Bootstrap には、応答性の高いモバイルファーストの流体グリッドシステムが組み込まれており、画面デバイスまたはビューポートのサイズが増加すると、システムは自動的に最大 12 列に分割されます。これには、よりセマンティックなレイアウトを生成するための、使いやすい事前定義クラスと強力なミックスインが含まれています。

2. グリッドオプション
bootstrap3.x は、以下に示すように 4 つのグリッドオプションを公式 Web サイトで紹介しています。オプション間の唯一の違いは、異なるサイズの画面デバイスに適しているかどうかです。クラス接頭辞を見てみましょう。これらの 4 つのグリッドオプションには、col-xs、col-sm、col-md、col-lg という略語が付いていることがわかります。 mdはmid、smはsmall、xsは***の略です。この名前は、これらのクラスが適応するさまざまな画面幅を反映しています。以下にそれぞれのクラスの特徴を紹介します。

以下の表を使用して、Bootstrap のグリッドシステムがさまざまな画面デバイスでどのように動作するかを詳しく確認します。

ブートストラップグリッドシステムの勉強ノート

3. 列オフセット
.col-md-offset-* を使用して列を右にオフセットします。これらのクラスは、* セレクターを使用してすべての列の左マージンを増やします。たとえば、.col-md-offset-4 は、.col-md-4 を幅 4 列分右に移動します。

4. ネストされた列
組み込みのグリッドを使用してコンテンツをネストするには、新しい .row と一連の .col-md-* 列を既存の .col-md-* 列に追加するだけです。ネストされた行に含まれる列の合計は 12 になる必要があります。

5. 列の並べ替え
.col-md-push-* と .col-md-pull-* を使用して、列の順序を簡単に変更できます。

ケース

<%@ page language="java" pageEncoding="UTF-8"%>
<%
 String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-cn">
 <head>
  <title>栅格</title>
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Language" content="zh-cn" />
  <meta name="author" content="linjiqin218@126.com" />
  <meta name="Copyright" content="parami|厦门波罗密网络科技有限公司" />
 
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
 
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <jsp:include page="/demo/base/js_bootstrap.jsp" />
  <style type="text/css">
  .show-grid [class ^="col-"] {
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: #eee;
   border: 1px solid #ddd;
   background-color: rgba(86, 61, 124, .15);
   border: 1px solid rgba(86, 61, 124, .2);
  }
  </style>
  <script type="text/javascript">
  $(function(){
  });
  </script>
 </head>
 <body>
  <b>col-lg-*用法</b> 
  <br/> 
  <div class="row show-grid">
   <div class="col-lg-8">.col-lg-8</div>
   <div class="col-lg-4">.col-lg-4</div>
  </div>
  <br/>   
  <b>col-md-*用法</b>
  <div class="row show-grid">
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
  </div>
  <br/> 
  <div class="row show-grid">
   <div class="col-md-8">.col-md-8</div>
   <div class="col-md-4">.col-md-4</div>
  </div>
  <br/> 
  <b>col-sm-*用法</b>
  <div class="row show-grid">
   <div class="col-sm-8">.col-sm-8</div>
   <div class="col-sm-4">.col-sm-4</div>
  </div>
  <br/>    
  <b>col-xs-*用法</b>
  <div class="row show-grid">
   <div class="col-xs-8">.col-xs-8</div>
   <div class="col-xs-4">.col-xs-4</div>
  </div> 
  <br/>  
  <b>列偏移: col-md-offset-*</b>
  <div class="row show-grid">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  </div>
  <div class="row show-grid">
   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  </div>
  <div class="row show-grid">
   <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  </div>
  <br/>  
  <b>嵌套列: 嵌套row所包含的列加起来应该等于12</b>
  <div class="row show-grid">
   <div class="col-md-9">
    Level 1: .col-md-9
    <div class="row show-grid">
     <div class="col-md-6">Level 2: .col-md-6</div>
     <div class="col-md-6">Level 2: .col-md-6</div>
    </div>
   </div>
  </div>
  <br/>  
  <b>列排序: .col-md-push-*和.col-md-pull-*</b> 
  <div class="row show-grid">
   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  </div>  
 </body>
</html>

ログイン後にコピー

デモンストレーション効果:

ブートストラップグリッドシステムの勉強ノート