<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td>
Bootstrapファーストガイド―CSS設計の手間を大幅に削減! 作者: 相澤裕介出版社/メーカー: カットシステム発売日: 2014/11/26メディア: 単行本この商品を含むブログ (2件) を見る UIまで手の回らないプログラマのためのBootstrap 3実用ガイド 作者: 大澤文孝出版社/メーカー: 翔泳社発売日: 2014/08/01メディア: Kindle版この商品を含むブログを見る Bootstrap 3 系で確認。Bootstrap 4 系でも大丈夫そう。 Bootstrap でテーブルを作る時、セル幅を指定するために .col-xs-6 などの Grid System のクラスが使えることを知った。 Grid System はネガティブマージンと float を利用しているので、.row のないところで使えないだろう、と思っていたが、table 向けにスタイルがリセッ
Forms 多様なフォームを作成するために, コントロールスタイル, レイアウトオプション, カスタムコンポーネントについてガイドラインと例を示します。 Overview フォームコントロールは our Rebooted form styles で展開します。これらのクラスを使用してカスタマイズされた表示をオプトインし, ブラウザとデバイス間でより一貫性のあるレンダリングを実現します。 入力項目に type 属性を使用してください。(emailや数値情報など) フォームスタイルのクラスやレイアウトのドキュメントをお読みください。 <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="e
BootstrapのFormは、書き方にいろいろパターンがあり、いまいち整理できていないので、調査を兼ねてまとめてみる。 結論から言えば、ドキュメントをよく読めば、いろいろ理解できる。 事前に知っておきたい Formをいじるまえに知っておきたいこととしては、 レイアウトにより(inline, horizontal)、マークアップが異なる。 text系(input,textarea,select)と、その他のものは扱いが違う。 horizontalではform-groupがrowと同じ概念になる(なので要素をcol-xで分割) の3つ。 私は、いろいろな差をBootstrapが吸収してくれるはずという先入観により、遠回りをしました。 素の状態 container以外は何もbootstrapの要素はない。 <div class="container"> <form> <label>name</
Django 製サイトで TwitterBootstrap を使いたいときはdjango-bootstrap-toolkit を使うのがオススメ。 前提問題 今回はとくにフォームについて取り上げる。 例えば bootstrap を使っているテンプレート内で、以下のように単純にフォームを扱う {{ form }} するとちょっと残念な感じになる。 以前書いた過去のフォームに関する記事のフォームで bootstrap を導入して、フォームに値を入れずに送信してみると以下のように。 (●・̆⍛・̆●) bootstrap でフォームはもっとかっこ良く扱える Bootstrap bootstrap において (一般的にかもしれないけど) フォームは control-group などを使うといい感じにしてくれる。 <div class="control-group error required">
このページは「Bootstrap 4.2.1」について説明しています。Bootstrap 3 については、「Bootstrap 3入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発されました。 最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 現時点(2018年12月30日)の最新バージョンは 4.2.1 です。 Bootstrap 2, Bootstrap 3, Bootstrap 4 では一部互換性の無い機能があります。 Chrome 45 / Firefox 38 / IE 10 / Edge 12 / Safari 9 / Opera 30 / iOS 9
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く