ホームページ > 記事 > php教程 > ブートストラップグリッドシステムの勉強ノート

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

高洛峰オリジナル: 2016-12-05 13:21:241751ブラウズ

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>

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

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Bootstrap が基本レイアウトを実装する方法の詳細な説明次の記事：Bootstrap が基本レイアウトを実装する方法の詳細な説明

続きを見る

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

関連記事