joppot

コピペで絶対動く。説明を妥協しない

プログラミング

Twitterbootstrap3の開発環境構築とファイル配置、テンプレートを試す

投稿日:2014年2月11日 更新日:


Bootstrap

概要

みなさんこんにちはcandleです。今回はtwitterbootstrap3のダウンロードを行い、ファイルを配置して、開発できる様に準備します。

twitterbootstrap3は最近リリースされましたバージョンです。

私の周りでも未だにバグがあったりするらしいです。

安定しているのが使いたい場合はtwitterbootstrap2の方を使った方がよいかもしれませんね。

twitterbootstrapとはtwitterと書いてありますが、あのtwitterの機能を使ったりAPIうんたらではなくて、html&css&javascriptのフレームワークです。

このtwitterbootstrapが作られた背景にはプログラマー、エンジニア、ディベロパーの開発を応援する目的がありました。というのも、一般にデザイナーではない、プログラマーはシステムや最高のアルゴリズム、開発を行ってもそれをアウトプットする時に、どうしてもデザインがひどくて認知されずらい事が多いのです。

そういった人達でも簡単に奇麗なデザインができるようにと作られたと聞きました。

前提

なし

twitterbootstrap3をダウンロードする

twitterbootstrap3をダウンロードしましょう。下のリンクに移動します。

http://getbootstrap.com/

中央の「Download Bootstrap」を押します。

Bootstrap_と_投稿_‹_joppot_—_WordPress-2

ダウンロード画面に移動するので、一番左の「Bootstrap」をクリックしてダウンロードします。

Getting_started_·_Bootstrap-3

zipファイルを解凍します。「dist」というフォルダができます。

これでダウンロード完了です。

ファイルを配置して開発の準備をする

では、開発するディレクトリを作りましょう。場所はどこでもかまいません。MAMPを使っていない人は「書類」フォルダの中に作るとよいでしょう。私はMAMPのhtdocsに作ります。ディレクトリ名は「bootstrap_test」にしましょう。

こんな感じですね。

htdocs-4

ここに先ほど解凍したdistフォルダの中身を全て移動します。

dist-5

これで準備は完了しました。

index.htmlを作って、bootstrapを試す

では「bootstrap_test」フォルダの中にindex.htmlを作成しましょう。

bootstrap_test_と_bootstrap_test

そしたら、index.htmlを適当なエディタで開きましょう。
私はAptana studio 3を使用します。

開いたら、次のソースコードをペーストしましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>

    </style>
  </head>
  <body>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

index.htmlのstyleのところにcss を書き込みます。

body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

下の図の様になります。

Web_-_bootstrap_test_index_html_-_Aptana_Studio_3_-__Applications_MAMP_htdocs 3

次にbodyタグの中に次のコードをコピペします。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div><!-- navbar-header -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#about">About</a>
        </li>
        <li>
          <a href="#contact">Contact</a>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!-- container -->
</div><!-- navbar -->
<div class="container">
  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br>
All you get is this text and a mostly barebones HTML document.
    </p>
  </div>
</div><!-- /.container -->

これを表示すると、それなりに美しい表示がされます。

localhost_8888_bootstrap_test___と_Web_-_bootstrap_test_index_html_-_Aptana_Studio_3_-__Applications_MAMP_htdocs

まとめ

このテンプレートはtwitterbootstrapの公式サイトにあるものです。自分でテンプレートを作ってもよし、借りてきてもよし、どんどん試しましょう。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

railsのrakeで作成したmigrationファイルとstatus履歴を削除する

概要 みなさんこんにちはcandleです。今回はrakeコマンドで作成したマイグレーションファイルの管理を紹介します。rakeコマンドを使っていると、よくよく考えれば必要の無いファイルがある。とか重複 …

railsのaws-sdk gemを使ってs3のファイルを削除する

by martinak15 概要 みなさんこんにちはcandleです。今回はs3にアップロードされている画像ファイルをrailsのaws-sdk gemを使用して削除してみたいと思います。 記事中で開 …

wordpressで任意のサブカテゴリー全てをget_categoriesで取得する

概要 みなさんこんにちはcandleです。今回はwordpress開発でよくあるサブカテゴリーを全て取得する方法を紹介します。 カテゴリー一覧をサイドバーに表示したい時があります。この時、get_ca …

Rails pluginを使ったgemの作り方[2](rails組み込み編)

概要 みなさんこんにちはcandleです。前回に引き続き、gemの作成をやっていきましょう。 今回はgemを作成したら、それをrailsプロジェクト上で読み込み、動作テストをするところをやります。 前 …

Hiragino Sansフォントウェイトのcss書き方まとめ

概要 みなさんこんにちはcandleです。今回はHiragino Sansのcssの書き方を紹介します。 Hiragino Sansの特徴はフォントの太さを1から9段階まで変えられることです。 一方で …

  • English
  • 日本語

ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー