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

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

関連記事

React WebでURLをaタグのリンクにして表示する

概要 みなさんこんにちはcandleです。今回はReactでコメントなどに投稿されたURLからリンクを生成する方法を紹介します。しかし、URLからリンクの自動生成は結構危険です。無尽蔵にリンク化を許可 …

react nativeのandroidでfailed to find Build Tools revision 23.0.1エラーが出る時の対処

概要 みなさんこんにちは、candleです。今回はreact nativeでrun-androidでbuildが失敗する時の対処です。 私の場合最新のandroid-sdkを入れたところ、以下のような …

入門ReactでGSAPアニメーションの使い方

概要 みなさんこんにちはcandleです。今回はReactでGSAPを使ってみたいと思います。 簡単にアニメーションが使えるjsライブラリはjQueryが有名です。ただ、jQueryとReactは相性 …

grepコマンドを使って正規表現を色々試してみるその1

概要 みなさんこんにちはcandleです。今回からgrepコマンドを使って正規表現を色々試してみます。 正規表現って、使えると便利ですが、それを勉強して使いこなせている人って少ないと思います。この機会 …

ruby on rails4でtwitter bootstrap 3のgemを使用してscaffoldを作成する

概要 みなさんこんにちはcandleです。今回はrails4上でtwitterbootstrap3のgemを使ってscaffoldしてみたいと思います。 scaffoldとはご存知のようにいわゆるwe …

  • English
  • 日本語

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