さきほど「Bootstrap 4 Beta」が発表されたのを知りました。
上の記事にCardsコンポーネントについてこう書かれていたんですね。
Dropped wells, thumbnails, and panels for cards. Cards are a brand new component to Bootstrap, but they’ll feel super familiar as they do nearly everything wells, thumbnails, and panels did, only better.
English-Video.netのトップページはBootstrap 3.3.7のThumbnailsコンポーネントを使っているのですが、それがBootstrap 4で無くなるというので、その代わりとなりそうなCard decksの項目をちょっと見てみました。
このCard decksというのはCard layoutという項目のオプションの1つなのですが、Card layoutの説明書きに「In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.」と書いてあるので、まだレスポンシブ対応はされていないみたいです。
試しにこのCard decksというのをパソコン上のChromeブラウザから表示させてウインドウの幅を伸び縮みさせてみたんですけど、画像の縦横比が変化するんですね。
例1: 幅の広いウインドウの場合。画像が300x200で表示される。
例2: 幅のせまいウインドウの場合。画像が138x200で表示される。
現在使用しているBootstrap 3.3.7のThumbnailsコンポーネントはウインドウの幅を変えても画像の縦横比は変化しないんです。
この先これをBootstrap 4のCardsコンポーネントに置き換えた場合、画像の縦横比が変わるようになるので見た目が結構変わりそうです。
いますぐにBootstrap 4を適用する訳ではないのですが、いろいろ確認しながら検討したいと思います。
