コード判定結果
コンテンツブロックなどが動作していないかご確認ください。
paizaの会員登録が必要です
#06:Bootstrapのグリッドシステムを理解しよう
この動画を見るにはpaizaの会員登録が必要です
無料会員登録して始める実技課題 「グリッドの割合を変更する」
右側のコードエリアのhtmlは、「hello world」「hello paiza」「hello HTML」という3つの見出しを表示します。3つの見出しは、Bootstrapのグリッドシステムで、3等分して表示されます。
このレイアウトを、「2:4:6」の割合になるように変更してください。
なお、Bootstrapのグリッドシステムは表示幅が狭い場合自動的に縦に整列されます。
コードエリアの幅を変えて、動作を確認してください。
コードの実行をして、エラーが出なければ、演習課題クリアです！
期待する出力値
Webページで柔軟なレイアウトを可能にする、Bootstrapのグリッドシステムを取り上げます。グリッドは、最近のWebページで主流になっている定番のデザインで、Bootstrapで簡単に実現できます。
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>1行目</h1>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h2>2行目のA</h2>
</div>
<div class="col-sm-4">
<h2>2行目のB</h2>
</div>
<div class="col-sm-4">
<h2>2行目のC</h2>
</div>
</div>
</div>
<!-- /.container -->
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
http://websae.net/twitter-bootstrap-grid-system-21060224/