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 5 Beta 1

Bootstrap 5 Blog

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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" 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 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" 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分前に更新