Bootstrap

ウィキペディア

索引トップ用語の索引ランキングカテゴリー

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2024/01/08 22:31 UTC 版)

利用例

HTMLページでの使用時に、Bootstrap用CSSをダウンロードし、HTMLファイルのリンクを用意する。（また、LESSの特別なコンパイラをダウンロードして使用してCSSをコンパイルできる。）

JavaScriptコンポーネントを使用したい場合は、HTML内でjQueryライブラリとともに参照する必要がある。

以下に動作例を示す。以下のHTMLは、公式ドキュメントに従いHTML5とCSS情報で構成された単純な検索フォームと表形式の結果を表す。以下の図は、Mozilla FirefoxVer10の動作例である。

<!DOCTYPE html>
<html>
  <head>
    <title>Example of Twitter Bootstrap</title>
    <!-- Include the bootstrap stylesheets -->
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <h1>Search</h1>
      <label>Example for a simple search form.</label>

      <!-- Search form with input field and button -->
      <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Search</button>
      </form>

      <h2>Results</h2>

      <!-- Table with alternating cell background color and outer frame -->
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Lorem ipsum dolor ...</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Ut enim ad minim veniam, ...</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Duis aute irure dolor ...</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- JavaScript placed at the end of the document so the pages load faster -->
    <!-- Optional: Include the jQuery library -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  </body>
</html>

固定レイアウトグリッドの作成

    <div class="row">
      <div class="span4">...</div>
      <div class="span8">...</div>
    </div>

Twitter Bootstrap Ver3.0.0の場合

<div class="row">
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
</div>
<div class="row">
  <div class="col-md-8">8 Column </div>
  <div class="col-md-4">4 Column </div>
</div>
<div class="row">
  <div class="col-md-4">4 Column</div>
  <div class="col-md-4">4 Column</div>
  <div class="col-md-4">4 Column</div>
</div>
<div class="row">
  <div class="col-md-6">6 Column</div>
  <div class="col-md-6">6 Column</div>
</div>

ネストしたフレキシブルレイアウトグリッドでの固定レイアウトグリッドの作成

    <div class="row">
      <div class="span4">
        <div class="row-fluid">
          <div class="4">============================</div>
          <div class="4">...</div>
          <div class="4">...</div>
        </div>
      </div>
      <div class="span8">...</div>
    </div>

脚注

^ "Release 5.3.2"; 閲覧日: 2023年9月18日; 出版日: 2023年9月14日.
^ “GitHub: Search Stars>10000”. 2019年5月17日閲覧。
^ “NASA - Spot The Station” (2012年11月6日). 2012年11月6日閲覧。
^ “MSNBC - Breaking News” (2012年11月6日). 2012年11月6日閲覧。
^ About - Bootstrap v5.3
^ http://blog.seosemanticxhtml.com/a-complete-reference-library-of-bootstrap-classes/
^ Blog: Using Twitter Bootstrap with Dojo. Retrieved on 2012-09-18
^ Dojo Toolkit implementation of Twitter Bootstrap. Retrieved on 2012-09-18
^ AMD for asynchronous loading of modules and its dependencies. Retrieved on 2012-09-18
^ http://angular-ui.github.io/bootstrap/
^ “Bootstrap in A List Apart No. 342” (英語). @mdo (2012年1月17日). 2021年3月16日閲覧。
^ “Bootstrap from Twitter” (英語). blog.twitter.com. 2021年3月16日閲覧。
^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. “概要”. getbootstrap.jp. 2021年3月16日閲覧。
^ “Say hello to Bootstrap 2.0” (英語). blog.twitter.com. 2021年3月16日閲覧。
^ Otto, Mark (2013年8月19日). “Bootstrap 3 released” (英語). Bootstrap Blog. 2021年3月16日閲覧。
^ Otto, Mark (2014年10月29日). “Bootstrap 3.3.0 released” (英語). Bootstrap Blog. 2021年3月16日閲覧。
^ Otto, Mark (2015年8月19日). “Bootstrap 4 alpha” (英語). Bootstrap Blog. 2021年3月16日閲覧。
^ Otto, Mark (2017年8月10日). “Bootstrap 4 Beta” (英語). Bootstrap Blog. 2021年3月16日閲覧。
^ Otto, Mark (2018年1月18日). “Bootstrap 4” (英語). Bootstrap Blog. 2021年3月16日閲覧。
^ ^a ^b “Bootstrapのパネルは、コンテンツの周りに少々のパディングがある境界の付いたボックス”. Bootstrap. 2023年5月19日閲覧。
^ “Images - Bootstrap 4.2 日本語リファレンスImage thumbnails”. Bootstrap. 2023年5月19日閲覧。
^ “Pagination(ページネーション)”. Bootstrap. 2023年5月19日閲覧。
^ “.well クラスは、灰色の背景色と少々のパディングを持ち、要素の周りに丸みのある境界線を追加”. Bootstrap. 2023年5月19日閲覧。
^ “GLYPHICONS - Visual language that everybody understands”. 2023年5月19日閲覧。
^ “Bootstrap 4 utility classes”. O’Reilly. 2023年5月19日閲覧。
^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. “Introduction” (英語). getbootstrap.com. 2021年3月16日閲覧。
^ Otto, Mark (2020年6月16日). “Bootstrap 5 alpha!” (英語). Bootstrap Blog. 2021年3月16日閲覧。
^ “Bootstrap 5 beta 2 - Summary, download, tutorial & next releases” (英語). MDB - Material Design for Bootstrap. 2021年3月16日閲覧。
^ “Release Release v5.0.0 (#33647) · twbs/bootstrap” (英語). GitHub. 2021年5月5日閲覧。
^ “Bootstrap 5”. blog.getbootstrap.com (2021年5月5日). 2022年10月1日閲覧。
^ “Bootstrap 5 & Material Design 2.0” (英語). MDB - Material Design for Bootstrap. 2021年3月16日閲覧。