プログラミング未経験者の学習日記

私が学習した内容のまとめサイトです。

【Bootstrap】Bootstrap(ブートストラップ)って何?

f:id:DAI_KONDO:20181030213557p:plain

Bootstrapって何?

ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークです。(詳細はウィキペディアを参照)

Bootstrap - Wikipedia

公式サイト

getbootstrap.com

Bootstrapを使う方法

①公式サイトのDocumentationページを開きます。

https://getbootstrap.com/docs/4.1/getting-started/introduction/

②「Starter template」にサンプルコードが掲載されているのでこれをコピペします。

f:id:DAI_KONDO:20181030213522p:plain

⓷サンプルコードは言語が「en」となっているため、「ja」に変更してください。

<html lang="ja">

④追加で<meta name="viewport" ~ のコードの上の行当たりに下記のコードを追加してください。旧バージョンのIEでレイアウト崩れを防止するためのコードです。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 Bootstrapを使うと何ができるのか?

通常、p要素のテキストを中央揃えにする場合、自分でCSS(もしくは<style>タグ内)に下記のように定義してスタイルを設定する必要がありました。

         HTML

<div class="box">Box</div>

         CSS(もしくは<style>タグ内)

.box{

  text-align:center;

  } 

 Bootstrapを使用した場合、自分で定義せずともあらかじめ用意されており「class="text-center"」とすることで中央揃えになります。

<div class="text-center">BOX</div> 

上記のように Bootstrapであらかじめ用意されてされているスタイルを使いこなすことで効率的に開発を進めることができます。