【僕の学習ノート】Bootstrapとは？分かりやすく解説
この記事は、Bootstrapについて端的にまとめてある僕のノートです。もし読者さんの役にも立てれば幸いです。
【僕の学習ノート】Bootstrapとは？分かりやすく解説
Bootstrapとは、効率良くレスポンシブなWebサイトを作る際によく使われる、CSSとJavaScriptのコードが含まれているライブラリーです。
【Bootstrap】
<How it’s often described>1. It’s a way to “build fast, responsive sites”.
2. It’s a “feature-packed, powerful, and extensible frontend toolkit”.
3. Front-end framework
4. CSS Framework (Library)— Naoya (@kaigaiblog63) October 16, 2022
まとめ
container
【Container Elements (Bootstrap)】
Meaning: Fixed width container with widths determined by screen sites. The equal margin on the left and right.Also, you're required to add this before using the Bootstrap grid system.https://t.co/cFfAbzE536
— Naoya (@kaigaiblog63) October 16, 2022
table
【Table Elements (Bootstrap)】
Adds basic styling to a table (padding, bottom borders, etc)https://t.co/0NhMASJcj2— Naoya (@kaigaiblog63) October 16, 2022
row
【Row Elements (Bootstrap)】
Meaning: Container for responsive columns.https://t.co/Vi62FtWbDc— Naoya (@kaigaiblog63) October 16, 2022
col
【Col (Bootstrap)】https://t.co/MuzpLZ5jvt
— Naoya (@kaigaiblog63) October 17, 2022
img-fluid
【img-fluid (Bootstrap)】
All images would be responsive by using this.1. It tells the browser not to expand the image larger than its original size using a max-width.
2. It tells it to scale down the image if the browser window gets narrower than the image pixel width.— Naoya (@kaigaiblog63) October 17, 2022
alert
【alert (Bootstrap)】
Alerts are often used to show information that needs immediate attention from users such as warnings, errors or confirmation messages. Bootstrap provides an easy way to create predefined alert messages and it also has different types of alerts.— Naoya (@kaigaiblog63) October 17, 2022
modifier
【list of modifiers available in Bootstrap】
Primary, secondary, success, info, warning, danger, light, dark.— Naoya (@kaigaiblog63) October 17, 2022
grid options
| Breakpoint | Class infix | Dimensions |
| Extra small | *Default (何も書かなくて良い) | < 576px |
| Small | sm | ≧ 576px |
| Medium | md | ≧ 768px |
| Large | lg | ≧ 992px |
| Extra large | xl | ≧ 1200px |
| Extra extra large | xxl | ≧ 1400px |
これを使うことで、レスポンシブを加えることが出来ます。(To make the code to be responsive, you have to insert the abbreviation into the CSS class name.)
ヘッダーに入れるのを忘れずに！！
<meta name="viewport" content="width=device-width, initial-scale=1">どう機能するのか理解する為に
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="alert alert-primary" role="alert">
Today
</div>
</div>
<div class="col-sm-3">
<div class="alert alert-primary" role="alert">
Tomorrow
</div>
</div>
<div class="col-sm-6">
<div class="alert alert-primary" role="alert">
After tomorrow
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>