Yahoo!

日本を代表する「ポータルサイト」です。

updated 2020-04-25

Google

定番のサイトです。

updated 2020-04-25

Private

個人的なサイトです。

updated 2020-04-25

Recom

個人的なリンク集です。

updated 2020-04-25

政府機関

日本の政府機関のサイトです。

updated 2020-05-02


星Bootstrap v5.0.0-alpha2

星Bootstrap 5 Alpha 2(2020-09-29)

星Bootstrap v4.5.0 テンプレート

ブートストラップはHTML5 Doctypeを必要としますが…
大きな問題は発生…。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper.js -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper.js and Bootstrap JS
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.min.js" integrity="sha384-5h4UG+6GOuV9qXh6HqOLwZMY4mnLPraeTrjT5v07o347pj6IkfuoASuGBhfDsp3d" crossorigin="anonymous"></script>
    -->
  </body>
</html>



ライセンスに関するFAQ

Bootstrap オープンソースに関するよくある質問です。

Bootstrap は MIT ライセンスのもとで公開されており, 2020年の Twitter 社に著作権があります。以下の条件で使用できます。

必須事項

できること

禁止事項

任意

詳細は Bootstrap リポジトリにある ライセンス を参照してください。

v4.5


Bootstrap と Masonry

Bootstrap のグリッドシステムとカードコンポーネントに Masonry を導入しましょう。

Masonry は Bootstrap には含まれていません。次のように CDN などを利用するか、JavaScript プラグインを追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

.row ラッパに data-masonry='{"percentPosition": true }' を追加することで、Bootstrap のレスポンシブグリッドに Masonry の配置システムを組み合わせることができます。

PlaceholderImage cap
カードタイトルは改行されます

これは下にサポートテキストがあり,追加コンテンツへ自然に注意を引くことができる縦長のカードです。このコンテンツは少し長めです。

吾輩は猫である。名前はまだない。

PlaceholderImage cap
カードタイトル

これは下にサポートテキストがあり,追加コンテンツへ自然に注意を引くことができるカードです。

3分前に更新

吾輩は猫である。名前はまだない。

カードタイトル

一般的なタイトルと,その下に短い文章を持つカードです。

3分前に更新

PlaceholderCard image

吾輩は猫である。名前はまだない。

カードタイトル

タイトルとその下にサポートテキストを持つカードです。このカードは追加のコンテンツがあるため,全体が少し縦長になっています。

3分前に更新