差分

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

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

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

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

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

<&lt;h1 class="page-header">&gt;Header<&lt;/h1>&gt; <&lt;h1 class="jumbotron">&gt;Header<&lt;/h1>&gt;

*Bootstrap3では、コンテンツ全体を <&lt;div class="container"><&gt;&lt;/div> &gt; でくくる使い方を想定している

<&lt;div class="row">&gt; <&lt;div class="col-xs-6">&gt;1<&lt;/div>&gt; <&lt;div class="con-xs-6">&gt;2<&lt;/div>&gt; <&lt;/div>&gt;

<&lt;div class="col-xs-offset-1 col-xs-4">&gt;test<&lt;/div>&gt;

<&lt;div class="row">&gt; <&lt;div class="col-xs-6 col-xs-push-6">&gt;test1<&lt;/div>&gt; <&lt;div class="col-xs-6 col-xs-pull-6">&gt;test2<&lt;/div>&gt; <&lt;/div>&gt;

<&lt;div class="col-xs-12 col-sm-6">&gt;Contents<&lt;/div>&gt;

<&lt;ul class="list-inline">&gt; <&lt;li>&gt;...<&lt;/li>&gt; <&lt;/ul>&gt;

<&lt;div class="radio">&gt; <&lt;input type="radio" value="1" name="hoge" id="hoge">&gt; <&lt;label for="hoge">&gt;HOGE<&lt;/label>&gt; <&lt;/div>&gt; <&lt;div class="checkbox">&gt; <&lt;input type="checkbox" value="foo" name="foo" id="foo">&gt; <&lt;label for="foo">&gt;FOOO<&lt;/label>&gt; <&lt;/div>&gt;

<&lt;div class="form-group">&gt; <&lt;label class="control-label" for="xlinks_login_user_id">&gt;ID<&lt;/label>&gt; <&lt;input class="form-control" id="xlinks_login_user_id" type="text" placeholder="IDを入力"> &gt; <&lt;/div>&gt; <&lt;div class="form-group">&gt; <&lt;label class="control-label" for="xlinks_login_user_password">&gt;パスワード<&lt;/label>&gt; <&lt;input class="form-control" id="xlinks_login_user_password" type="password" placeholder="パスワードを入力"> &gt; <&lt;/div>&gt;

<&lt;div class="modal" role="dialog" area-hidden="true" id="login_dialog">&gt; <&lt;div class="modal-dialog">&gt; <&lt;div class="modal-content">&gt; <&lt;div class="modal-header">&gt; <&lt;h4 class="modal-title">&gt;TITLE<&lt;/h4>&gt; <&lt;/div>&gt; <&lt;div class="modal-body"><&gt;&lt;/div> &gt; <&lt;div class="modal-footer">&gt; <&lt;button class="btn btn-primary" data-dismiss="modal">&gt;閉じる<&lt;/button>&gt; <&lt;/div>&gt; <&lt;/div>&gt; <&lt;/div>&gt; <&lt;/div>&gt;

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

<&lt;div class="alert alert-danger">&gt;必須です<&lt;/div>&gt;