12,673
回編集
差分
ナビゲーションに移動
検索に移動
ページの作成:「==Bootstrap== [CSS][CSS3][レスポンシブWebデザイン][jQuery][Angular JS] {{amazon|4798135992}} *http://getbootstrap.com/ *https://qiita.com/akatsuki174/it…」
==Bootstrap==
[CSS][CSS3][レスポンシブWebデザイン][jQuery][Angular JS]
{{amazon|4798135992}}
*http://getbootstrap.com/
*https://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf
====基本テンプレート====
*http://getbootstrap.com/getting-started/
<!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種類に分類
##Extra small(-768px)
##Small(768 - 992px)
##Medium(992 - 1200px)
##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>
====ブラウザの幅に応じて段組を変える====
{|class="wikitable"
!接頭辞
!意味
|-
|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>
====表示非表示を切り替える====
{|class="wikitable"
!
!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>
===ボタン===
====色====
{|class="wikitable"
!クラス名
!用途
|-
|btn-default
|デフォルト
|-
|btn-primary
|プライマリ
|-
|btn-success
|成功
|-
|btn-info
|情報
|-
|btn-warning
|警告
|-
|btn-danger
|危険(エラー)
|-
|}
====大きさ====
{|class="wikitable"
!クラス名
!大きさ
|-
|btn-xs
|極小
|-
|btn-sm
|小さく
|-
|btn-lg
|大きく
|-
|btn-block
|横一杯
|-
|}
===エラーメッセージ===
====アラートボックス====
{|class="wikitable"
!クラス名
!用途
|-
|alert-success
|成功
|-
|alert-info
|情報
|-
|alert-warning
|警告
|-
|alert-danger
|エラー
|-
|}
<div class="alert alert-danger">必須です</div>
==リファレンス==
===ナビゲーションバー===
*http://bootstrap3.cyberlab.info/components/navbar.html
[CSS][CSS3][レスポンシブWebデザイン][jQuery][Angular JS]
{{amazon|4798135992}}
*http://getbootstrap.com/
*https://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf
====基本テンプレート====
*http://getbootstrap.com/getting-started/
<!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種類に分類
##Extra small(-768px)
##Small(768 - 992px)
##Medium(992 - 1200px)
##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>
====ブラウザの幅に応じて段組を変える====
{|class="wikitable"
!接頭辞
!意味
|-
|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>
====表示非表示を切り替える====
{|class="wikitable"
!
!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>
===ボタン===
====色====
{|class="wikitable"
!クラス名
!用途
|-
|btn-default
|デフォルト
|-
|btn-primary
|プライマリ
|-
|btn-success
|成功
|-
|btn-info
|情報
|-
|btn-warning
|警告
|-
|btn-danger
|危険(エラー)
|-
|}
====大きさ====
{|class="wikitable"
!クラス名
!大きさ
|-
|btn-xs
|極小
|-
|btn-sm
|小さく
|-
|btn-lg
|大きく
|-
|btn-block
|横一杯
|-
|}
===エラーメッセージ===
====アラートボックス====
{|class="wikitable"
!クラス名
!用途
|-
|alert-success
|成功
|-
|alert-info
|情報
|-
|alert-warning
|警告
|-
|alert-danger
|エラー
|-
|}
<div class="alert alert-danger">必須です</div>
==リファレンス==
===ナビゲーションバー===
*http://bootstrap3.cyberlab.info/components/navbar.html
© 2006 矢木浩人
