HTML5+CSS3【マルチデバイス】―Twitter Bootstrap04
Twitter Bootstrap
Bootstrap
Typography
Emphasis classes
ソースコード【 HTML 】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
ブラウザで表示【 Chrome 】
Description
ソースコード【 HTML 】
<dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl>
ブラウザで表示【 Chrome 】
- dl要素に「class="dl-horizontal"」を追加
<dl class="dl-horizontal">
ブラウザで表示【 Chrome 】