| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

「Bootstrap」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
(ページの作成:「==Bootstrap== [CSS][CSS3][レスポンシブWebデザイン][jQuery][Angular JS] {{amazon|4798135992}} *http://getbootstrap.com/ *https://qiita.com/akatsuki174/it…」)
 
1行目: 1行目:
 
==Bootstrap==
 
==Bootstrap==
−
[CSS][CSS3][レスポンシブWebデザイン][jQuery][Angular JS]
+
[[CSS][CSS3][レスポンシブWebデザイン][jQuery][Angular JS]]
  
 
{{amazon|4798135992}}
 
{{amazon|4798135992}}
8行目: 8行目:
 
====基本テンプレート====
 
====基本テンプレート====
 
*http://getbootstrap.com/getting-started/
 
*http://getbootstrap.com/getting-started/
−
  <!DOCTYPE html>
+
  &lt;!DOCTYPE html&gt;
−
  <html lang="en">
+
  &lt;html lang="en"&gt;
−
   <head>
+
   &lt;head&gt;
−
     <meta charset="utf-8">
+
     &lt;meta charset="utf-8"&gt;
−
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
     &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
−
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
−
     <title>Bootstrap 101 Template</title>
+
     &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
 
   
 
   
−
     <!-- Bootstrap -->
+
     &lt;!-- Bootstrap --&gt;
−
     <link href="css/bootstrap.min.css" rel="stylesheet">
+
     &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
 
   
 
   
−
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+
     &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
−
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
     &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
−
     <!--[if lt IE 9]>
+
     &lt;!--[if lt IE 9]&gt;
−
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+
       &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
−
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+
       &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
−
     <![endif]-->
+
     &lt;![endif]--&gt;
−
   </head>
+
   &lt;/head&gt;
−
   <body>
+
   &lt;body&gt;
−
     <h1>Hello, world!</h1>
+
     &lt;h1&gt;Hello, world!&lt;/h1&gt;
 
   
 
   
−
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+
     &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
−
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
−
     <!-- Include all compiled plugins (below), or include individual files as needed -->
+
     &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
−
     <script src="js/bootstrap.min.js"></script>
+
     &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
−
   </body>
+
   &lt;/body&gt;
−
  </html>
+
  &lt;/html&gt;
  
 
===ヘッダー===
 
===ヘッダー===
−
  <h1 class="page-header">Header</h1>
+
  &lt;h1 class="page-header"&gt;Header&lt;/h1&gt;
−
  <h1 class="jumbotron">Header</h1>
+
  &lt;h1 class="jumbotron"&gt;Header&lt;/h1&gt;
  
  
50行目: 50行目:
  
 
===コンテナ===
 
===コンテナ===
−
*Bootstrap3では、コンテンツ全体を <div class="container"></div> でくくる使い方を想定している
+
*Bootstrap3では、コンテンツ全体を &lt;div class="container"&gt;&lt;/div&gt; でくくる使い方を想定している
 
*これにより、デフォルトのマージンが確保される
 
*これにより、デフォルトのマージンが確保される
 
===段組===
 
===段組===
57行目: 57行目:
 
*ネストさせることも可能
 
*ネストさせることも可能
 
=====2段組み=====
 
=====2段組み=====
−
  <div class="row">
+
  &lt;div class="row"&gt;
−
   <div class="col-xs-6">1</div>
+
   &lt;div class="col-xs-6"&gt;1&lt;/div&gt;
−
   <div class="con-xs-6">2</div>
+
   &lt;div class="con-xs-6"&gt;2&lt;/div&gt;
−
  </div>
+
  &lt;/div&gt;
  
 
====空きを作る====
 
====空きを作る====
 
*オフセットを指定し、指定した幅だけ枠を開けることができる
 
*オフセットを指定し、指定した幅だけ枠を開けることができる
−
  <div class="col-xs-offset-1 col-xs-4">test</div>
+
  &lt;div class="col-xs-offset-1 col-xs-4"&gt;test&lt;/div&gt;
 
====列を入れ替える====
 
====列を入れ替える====
 
*col-xs-push-XX,col-xs-pull-XX を利用(XXは1～12)する
 
*col-xs-push-XX,col-xs-pull-XX を利用(XXは1～12)する
−
  <div class="row">
+
  &lt;div class="row"&gt;
−
   <div class="col-xs-6 col-xs-push-6">test1</div>
+
   &lt;div class="col-xs-6 col-xs-push-6"&gt;test1&lt;/div&gt;
−
   <div class="col-xs-6 col-xs-pull-6">test2</div>
+
   &lt;div class="col-xs-6 col-xs-pull-6"&gt;test2&lt;/div&gt;
−
  </div>
+
  &lt;/div&gt;
 
====ブラウザの幅に応じて段組を変える====
 
====ブラウザの幅に応じて段組を変える====
 
{|class="wikitable"
 
{|class="wikitable"
92行目: 92行目:
 
*Extra smallの場合、col-xs-12 が適用され、幅が12分の12(コンテナ一杯)となる
 
*Extra smallの場合、col-xs-12 が適用され、幅が12分の12(コンテナ一杯)となる
 
*Small以上の場合、col-sm-6 が適用され、幅が12分の6(コンテナ幅の半分)となる
 
*Small以上の場合、col-sm-6 が適用され、幅が12分の6(コンテナ幅の半分)となる
−
  <div class="col-xs-12 col-sm-6">Contents</div>
+
  &lt;div class="col-xs-12 col-sm-6"&gt;Contents&lt;/div&gt;
  
 
====表示非表示を切り替える====
 
====表示非表示を切り替える====
154行目: 154行目:
 
===リスト===
 
===リスト===
 
====横に並べる====
 
====横に並べる====
−
  <ul class="list-inline">
+
  &lt;ul class="list-inline"&gt;
−
   <li>...</li>
+
   &lt;li&gt;...&lt;/li&gt;
−
  </ul>
+
  &lt;/ul&gt;
 
===フォーム===
 
===フォーム===
 
*form-groupでくくる
 
*form-groupでくくる
163行目: 163行目:
 
*静的なテキストには form-control-static を指定する
 
*静的なテキストには form-control-static を指定する
 
*ラジオボタン、チェックボックスは オブジェクトとラベルを それぞれのクラスでくくる
 
*ラジオボタン、チェックボックスは オブジェクトとラベルを それぞれのクラスでくくる
−
  <div class="radio">
+
  &lt;div class="radio"&gt;
−
   <input type="radio" value="1" name="hoge" id="hoge">
+
   &lt;input type="radio" value="1" name="hoge" id="hoge"&gt;
−
   <label for="hoge">HOGE</label>
+
   &lt;label for="hoge"&gt;HOGE&lt;/label&gt;
−
  </div>
+
  &lt;/div&gt;
−
  <div class="checkbox">
+
  &lt;div class="checkbox"&gt;
−
   <input type="checkbox" value="foo" name="foo" id="foo">
+
   &lt;input type="checkbox" value="foo" name="foo" id="foo"&gt;
−
   <label for="foo">FOOO</label>
+
   &lt;label for="foo"&gt;FOOO&lt;/label&gt;
−
  </div>
+
  &lt;/div&gt;
 
*説明文にはhelp-block を設定する
 
*説明文にはhelp-block を設定する
 
*ボタンには btn クラスを適用する
 
*ボタンには btn クラスを適用する
  
 
=====例=====
 
=====例=====
−
  <div class="form-group">
+
  &lt;div class="form-group"&gt;
−
   <label class="control-label" for="xlinks_login_user_id">ID</label>
+
   &lt;label class="control-label" for="xlinks_login_user_id"&gt;ID&lt;/label&gt;
−
   <input class="form-control" id="xlinks_login_user_id" type="text" placeholder="IDを入力">          
+
   &lt;input class="form-control" id="xlinks_login_user_id" type="text" placeholder="IDを入力"&gt;          
−
  </div>
+
  &lt;/div&gt;
−
  <div class="form-group">
+
  &lt;div class="form-group"&gt;
−
   <label class="control-label" for="xlinks_login_user_password">パスワード</label>
+
   &lt;label class="control-label" for="xlinks_login_user_password"&gt;パスワード&lt;/label&gt;
−
   <input class="form-control" id="xlinks_login_user_password" type="password" placeholder="パスワードを入力">          
+
   &lt;input class="form-control" id="xlinks_login_user_password" type="password" placeholder="パスワードを入力"&gt;          
−
  </div>
+
  &lt;/div&gt;
 
===モーダルダイアログボックス===
 
===モーダルダイアログボックス===
 
=====ダイアログ=====
 
=====ダイアログ=====
−
  <div class="modal" role="dialog" area-hidden="true" id="login_dialog">
+
  &lt;div class="modal" role="dialog" area-hidden="true" id="login_dialog"&gt;
−
  <div class="modal-dialog">
+
  &lt;div class="modal-dialog"&gt;
−
   <div class="modal-content">
+
   &lt;div class="modal-content"&gt;
−
     <div class="modal-header">
+
     &lt;div class="modal-header"&gt;
−
       <h4 class="modal-title">TITLE</h4>
+
       &lt;h4 class="modal-title"&gt;TITLE&lt;/h4&gt;
−
     </div>
+
     &lt;/div&gt;
−
     <div class="modal-body"></div>
+
     &lt;div class="modal-body"&gt;&lt;/div&gt;
−
     <div class="modal-footer">
+
     &lt;div class="modal-footer"&gt;
−
       <button class="btn btn-primary" data-dismiss="modal">閉じる</button>
+
       &lt;button class="btn btn-primary" data-dismiss="modal"&gt;閉じる&lt;/button&gt;
−
     </div>
+
     &lt;/div&gt;
−
   </div>
+
   &lt;/div&gt;
−
  </div>
+
  &lt;/div&gt;
−
  </div>
+
  &lt;/div&gt;
 
=====ダイアログを開くボタン=====
 
=====ダイアログを開くボタン=====
−
  <button class="btn btn-primary" data-toggle="modal" data-target="#login_dialog">ログイン</button>
+
  &lt;button class="btn btn-primary" data-toggle="modal" data-target="#login_dialog"&gt;ログイン&lt;/button&gt;
−
<blockquote>Bootstrap3では、JavaScriptを記述することなく、動きを作ることができ、「データ属性API(Data Attribute API)」という。data-toggle と data-target を用いているが、どのような属性を指定すべきなのかはコンポーネントごとに異なる。data- から始まる属性は、HTML5において、「独立データ属性」としてアプリケーション固有のデータを格納する目的で使用される</blockquote>
+
&lt;blockquote&gt;Bootstrap3では、JavaScriptを記述することなく、動きを作ることができ、「データ属性API(Data Attribute API)」という。data-toggle と data-target を用いているが、どのような属性を指定すべきなのかはコンポーネントごとに異なる。data- から始まる属性は、HTML5において、「独立データ属性」としてアプリケーション固有のデータを格納する目的で使用される&lt;/blockquote&gt;
 
===ボタン===
 
===ボタン===
 
====色====
 
====色====
263行目: 263行目:
 
|-
 
|-
 
|}
 
|}
−
  <div class="alert alert-danger">必須です</div>
+
  &lt;div class="alert alert-danger"&gt;必須です&lt;/div&gt;
  
 
==リファレンス==
 
==リファレンス==
 
===ナビゲーションバー===
 
===ナビゲーションバー===
 
*http://bootstrap3.cyberlab.info/components/navbar.html
 
*http://bootstrap3.cyberlab.info/components/navbar.html

2020年2月15日 (土) 08:00時点における版

Bootstrap

[[CSS][CSS3][レスポンシブWebデザイン][jQuery][Angular JS]]

4798135992.09.MZZZZZZZ.jpg link

基本テンプレート

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

ヘッダー

<h1 class="page-header">Header</h1>
<h1 class="jumbotron">Header</h1>


グリッドレイアウト

ビューポート

  • ピクセル幅により、次に4種類に分類
    1. Extra small(-768px)
    2. Small(768 - 992px)
    3. Medium(992 - 1200px)
    4. Large(1200px -)

コンテナ

  • Bootstrap3では、コンテンツ全体を <div class="container"></div> でくくる使い方を想定している
  • これにより、デフォルトのマージンが確保される

段組

基本クラス

  • col-xs-n コンテナの12分のn(1～12) の幅を占める
  • ネストさせることも可能
2段組み
<div class="row">
  <div class="col-xs-6">1</div>
  <div class="con-xs-6">2</div>
</div>

空きを作る

  • オフセットを指定し、指定した幅だけ枠を開けることができる
<div class="col-xs-offset-1 col-xs-4">test</div>

列を入れ替える

  • col-xs-push-XX,col-xs-pull-XX を利用(XXは1～12)する
<div class="row">
  <div class="col-xs-6 col-xs-push-6">test1</div>
  <div class="col-xs-6 col-xs-pull-6">test2</div>
</div>

ブラウザの幅に応じて段組を変える

接頭辞 意味
col-xs- Extra small(-768px)
col-sm- Small(768 - 992px)
col-md- Medium(992 - 1200px)
col-lg- Large(1200px -)
例
  • Extra smallの場合、col-xs-12 が適用され、幅が12分の12(コンテナ一杯)となる
  • Small以上の場合、col-sm-6 が適用され、幅が12分の6(コンテナ幅の半分)となる
<div class="col-xs-12 col-sm-6">Contents</div>

表示非表示を切り替える

Extra small Small Medium Large
visible-xs ○ × × ×
visible-sm × ○ × ×
visible-md × × ○ ×
visible-lg × × × ○
hidden-xs × ○ ○ ○
hidden-sm ○ × ○ ○
hidden-md ○ ○ × ○
hidden-lg ○ ○ ○ ×

UI

リスト

横に並べる

<ul class="list-inline">
  <li>...</li>
</ul>

フォーム

  • form-groupでくくる
  • 入力コントロールの見出しには、control-label を指定する
  • 入力コントロールには form-control を指定する
  • 静的なテキストには form-control-static を指定する
  • ラジオボタン、チェックボックスは オブジェクトとラベルを それぞれのクラスでくくる
<div class="radio">
  <input type="radio" value="1" name="hoge" id="hoge">
  <label for="hoge">HOGE</label>
</div>
<div class="checkbox">
  <input type="checkbox" value="foo" name="foo" id="foo">
  <label for="foo">FOOO</label>
</div>
  • 説明文にはhelp-block を設定する
  • ボタンには btn クラスを適用する
例
<div class="form-group">
  <label class="control-label" for="xlinks_login_user_id">ID</label>
  <input class="form-control" id="xlinks_login_user_id" type="text" placeholder="IDを入力">          
</div>
<div class="form-group">
  <label class="control-label" for="xlinks_login_user_password">パスワード</label>
  <input class="form-control" id="xlinks_login_user_password" type="password" placeholder="パスワードを入力">          
</div>

モーダルダイアログボックス

ダイアログ
<div class="modal" role="dialog" area-hidden="true" id="login_dialog">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">TITLE</h4>
    </div>
    <div class="modal-body"></div> 
    <div class="modal-footer">
      <button class="btn btn-primary" data-dismiss="modal">閉じる</button>
    </div>
  </div>
</div>
</div>
ダイアログを開くボタン
<button class="btn btn-primary" data-toggle="modal" data-target="#login_dialog">ログイン</button>

<blockquote>Bootstrap3では、JavaScriptを記述することなく、動きを作ることができ、「データ属性API(Data Attribute API)」という。data-toggle と data-target を用いているが、どのような属性を指定すべきなのかはコンポーネントごとに異なる。data- から始まる属性は、HTML5において、「独立データ属性」としてアプリケーション固有のデータを格納する目的で使用される</blockquote>

ボタン

色

クラス名 用途
btn-default デフォルト
btn-primary プライマリ
btn-success 成功
btn-info 情報
btn-warning 警告
btn-danger 危険(エラー)

大きさ

クラス名 大きさ
btn-xs 極小
btn-sm 小さく
btn-lg 大きく
btn-block 横一杯

エラーメッセージ

アラートボックス

クラス名 用途
alert-success 成功
alert-info 情報
alert-warning 警告
alert-danger エラー 
<div class="alert alert-danger">必須です</div>

リファレンス

ナビゲーションバー

「https://www.typea.info/tips_/index.php?title=Bootstrap&oldid=2973」から取得

© 2006 矢木浩人