joppot

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

プログラミング

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

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

Pocket

Bootstrap

概要

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

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

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

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

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

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

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

SPONSORED LINK


前提

なし


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のmodelで各データが何個あるかカウントする

概要 皆さんこんにちはcandleです。 今回は、railsでレコードのデータそれぞれ何個あるのか数える方法を紹介します。 mysqlだと簡単なのですが、railsだとよくわからなかったので、いろいろ …

fluentdでrails logをtailで直接取得する方法

概要 追記) この記事はだいぶ古くなってしまったので、新しく書き直しました。 こちらの方を参照した方が多分良いことが書いてあります。 https://joppot.info/2017/03/17/35 …

railsのfluent-loggerとdevise gemを使ってユーザーの行動をfluentdサーバに収集する

概要 fluentdと言えば、ビックデータで扱うようなデータを集め出力するサーバですが、これとrailsのfluent-logger gemとdevise gemを組み合わせてユーザーの行動ログをとっ …

docker コマンドのショートカットをbash aliasで作成しました

概要 みなさんこんにちはcandleです。今回はdockerコマンドを簡単に操作するためのエイリアスを紹介します。もちろん、僕が便利かなと思って作成したものなので、コピペしてもらい自由により使いやすく …

ruby on railsのckeditor gemの使い方をscaffoldを用いて解説する

概要 みなさんこんにちはcandleです。今回はruby on railsのckeditorという素晴らしいgemを使って見たいと思います。 ckeditorとはweb版の高機能なwordとかテキスト …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ