初めてのBootstrap

プロジェクトの概要、内容と簡単なテンプレートの利用

下記のボタンをクリックすると最新のBootstrapソースをダウンロードできる。最小限必要なファイルを含 む簡易版minified versions、またはすべてのCSS, Javascript、ドキュメントを含むファイルをダウンロードできる。後者はGitHubから入手する。

使うためにはHTMLとCSSの知識が必要である。カストマイズするための code editor が必須で、 プロジェクトでは Sublime Text 2 を推奨している。

簡易版

初めての方はこちらからダウンロード: 際と作成に必要なすべてのCSSとJavascript、 例題で使うイメージが含まれる。説明ドキュメント、オリジナルソースは含まれない。

Bootstrap 簡易版

すべてのファイル

すべての CSS と JavaScript,、およびローカル保存用のドキュメントが含まれる。ファイル数が多く、また重複もあ るので注意が必要である。直接GitHubから最新版を選ぶ。

Bootstrap ソース

ダウンロードした簡易版には以下のファイルが含まれる。

ダウンロードした圧縮ファイル(bootstrap.zip) を解凍する。以下のようなファイル構成になっている。

  bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

簡易版は、bootstrap.min.cssbootstrap.min.js である。bootstrap.css, bootstrap.jsと機能は同じだが余分なコメントが削除されているので2割程度サイズが小さ い。Javascript プラグインを使うためには jQuery が必須である。

ウェブ制作に使うさまざまなHTML, CSS,  JS が含まれる。 Bootstrap Customize にカテゴリ別機能(部品)の一覧がある。ここから必要な部品を選んでダウンロードすることもできる。

部品カテゴリ

Scaffolding

Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

Base CSS

Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

Components

Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

JavaScript plugins

Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

部品の一覧

Together, the Components and JavaScript plugins sections provide the following interface elements:

  • Button groups
  • Button dropdowns
  • Navigational tabs, pills, and lists
  • Navbar
  • Labels
  • Badges
  • Page headers and hero unit
  • Thumbnails
  • Alerts
  • Progress bars
  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.

With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.

Now, here's a look at a typical HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </body>
</html>

To make this a Bootstrapped template, just include the appropriate CSS and JS files:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.

Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.

  • Starter template

    A barebones HTML document with all the Bootstrap CSS and JavaScript included.

  • Basic marketing site

    Featuring a hero unit for a primary message and three supporting elements.

  • Fluid layout

    Uses our new responsive, fluid grid system to create a seamless liquid layout.

  • Narrow marketing

    Slim, lightweight marketing template for small projects or teams.

  • Justified nav

    Marketing page with equal-width navigation links in a modified navbar.

  • Sign in

    Barebones sign in form with custom, larger form controls and a flexible layout.

  • Sticky footer

    Pin a fixed-height footer to the bottom of the user's viewport.

  • Carousel jumbotron

    A more interactive riff on the basic marketing site featuring a prominent carousel.

Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

Visit the Bootstrap docs Customize Bootstrap