【Bootstrap】Bootstrap(ブートストラップ)って何?
Bootstrapって何?
ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークです。(詳細はウィキペディアを参照)
公式サイト
Bootstrapを使う方法
①公式サイトのDocumentationページを開きます。
https://getbootstrap.com/docs/4.1/getting-started/introduction/
②「Starter template」にサンプルコードが掲載されているのでこれをコピペします。
⓷サンプルコードは言語が「en」となっているため、「ja」に変更してください。
<html lang="ja">
④追加で<meta name="viewport" ~ のコードの上の行当たりに下記のコードを追加してください。旧バージョンのIEでレイアウト崩れを防止するためのコードです。
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であらかじめ用意されてされているスタイルを使いこなすことで効率的に開発を進めることができます。