2024.10.01
【勉強】ミドルウェア・アプリケーションのEOL・EOSLについて学んでみた
2017.08.22
プログラミングBootstrap 4 のCheat Sheet
こんにちは。新卒のSKです。
前回に引き続き、「開発の現場で使えるツール紹介」にて紹介したツールをより細かく解説しようと思います。
今回は、Bootstrap4 Cheat Sheet。
◆サイトはこちら: https://hackerthemes.com/bootstrap-cheatsheet/
Bootstrapは、近年ではどのサイトでも利用されているようなので今更感はありますが、
手動で作るのが面倒なものは、大体Bootstrap4を導入して少し手を加えるだけで解決することも。
あらかじめサンプルとして部品が用意されているから、
WEB制作する側は応用するだけで良いですね。効率的で時短。
ボタン類もデザインはシンプルですがモダンで、
汎用性がある割にはしっかり見栄えするサイトが作れます。
これれらの機能を全部覚えて使うのはかなり厳しいので、
簡単に調べられて、視覚的にも確認が可能なのが、今回のCheet Sheetです。
Bootstrap4の機能のすべてがここでチェックできて、コードも確認できるからとても便利。
サンプルがPreveiw欄に表示されるので、必要な機能が備わってるか、コーディングでいちいち確認する必要もなく、確認も楽です。
ちなみに、先日も少し紹介していたBootstrapにおける新機能「カード」はこのような感じ。
<div class="card"> <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>
同じような表示をさせるのに
いちいち枠を作ってその中に画像埋め込んで、
marginやpaddingを設定する必要がなくなりましたね。
【記事への感想募集中!】
記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!【テクノデジタルではエンジニア/デザイナーを積極採用中です!】
下記項目に1つでも当てはまる方は是非、詳細ページへ!Qangaroo(カンガルー)
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
最近の記事
タグ検索