bootstrapとは？

cssフレームワーク。
フレームワークとは、使いやすいように先人がまとめてくれたもの。
（ライブラリとAPIとの違いは勉強中）

もともとTwitter bootstrapと言われていたが、今ではbootstrapと呼ばれている。

bootstrapの基本的な使い方とは？

bootstrapを使うためには、
HTMLのheadの部分にlink要素を書けばOK。
(headってどこ！？などわからない方は、基本的なHTMLの構造はこちら）
（執筆中。。。）

bootstrapでの色の変更・指定の方法は？

基本的には「bg-◯◯」や「text-◯◯」の
「◯◯」の部分に色を指定することで、背景色や文字色を変更可能！
「◯◯」には「primary」「success」「info」「warning」「danger」が入る。

１行だけ例を書くとこんな具合になる。

<div class="container bg-primary text-success">
・・・
</div>

HTMLとCSSとBootstrapを組み合わせて書くとこんな感じ。
まるごとメモ帳などのエディタにコピペをしてみれば再現できるはず！
んで、「bg-◯◯」や「text-◯◯」の部分を変更してみたら、色が変わることを確認してみて！


<!doctype html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap Css -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

		<title>色を変更してみよう！</title>
	</head>

	<body>
		<!-- all page covered -->
		<div class="container bg-primary">
						<p>全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ全体のコンテナ</p>

			<div class="container">
				<div class="row">
					<div class="col-sm text-success bg-info">
						<p>1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ</p>
					</div>
					<div class="col-sm text-danger bg-success">
						<p>1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ1-2つ目のコンテナ</p>
					</div>

				</div>			
			</div>

			<div class="container">
				<div class="row">
					<div class="col-sm text-danger bg-success">
						<p>2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ</p>
					</div>
				</div>			
			</div>

			<div class="container">
				<div class="row">
					<div class="col-sm text-primary bg-warning">
						<p>3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ</p>
					</div>
				</div>			
			</div>
			<div class="container">
				<div class="row">
					<div class="col text-success bg-info">
						<p>1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ1つ目のコンテナ</p>
					</div>
				</div>			
			</div>

			<div class="container">
				<div class="row">
					<div class="col text-danger bg-success">
						<p>2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ2つ目のコンテナ</p>
					</div>
				</div>			
			</div>

			<div class="container">
				<div class="row">
					<div class="col text-primary bg-warning">
						<p>3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ3つ目のコンテナ</p>
					</div>
				</div>			
			</div>
		</div>
	</body>

</html>

なにか疑問があればTwitterのDMまでお願いします！
ではではドロン！
https://twitter.com/pocket_ma_kun