Bootstrapって何

yasu (79)in #japanese • 3 years ago (edited)

こんにちは、@yasuです。

参考にしたソースを見たときにBootstrapというキーワードが気になりました。

分からないことだらけです。

それで調べてみました。

ブートストラップとは、

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。
https://ja.wikipedia.org/wiki/Bootstrap

ブートストラップの公式サイト
https://getbootstrap.com/
Build fast, responsive sites with Bootstrap
Bootstrapを使用して高速でレスポンシブなサイトを構築する

Bootstrapは、レスポンシブサイトのための技術らしい。

スターターテンプレート

これに自分のコードを肉づけるといいらしい。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" 
      crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>



    <script 
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" 
      crossorigin="anonymous">
    </script>
    <script 
      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" 
      integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" 
      crossorigin="anonymous"></script>
    <script 
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" 
      integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" 
      crossorigin="anonymous">
    </script>

  </body>
</html>

参考記事
～初心者向け～ Bootstrapの使い方（導入編）
https://netanswer.co.jp/blog/143/

#jp #zzan #marlians

3 years ago in #japanese by yasu (79)

$1.26

STEEM 0.30

TRX 0.12

JST 0.034

BTC 63750.99

ETH 3130.22

USDT 1.00

SBD 3.95

Bootstrapって何

スターターテンプレート

Coin Marketplace