bootstrap_learning/0550_well.html at master · akicho8/bootstrap_learning · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- くぼみパターン - ちょっとしたグループ化と注目 -->
<!-- ちょっとしたグループ化して表示したいものをくぼみに入れるパターン -->
<!-- サイズを持ってないし灰色なのでかなり汎用的に使えそう -->
<!DOCTYPE html>
<html lang="ja">
<html>
  <head>
    <meta charset="UTF-8" />
    <link href="assets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
      <h4>汎用的に使えるくぼみ</h4>
      <div class="well">
        くぼみ
      </div>

      <h4>ボタンのようにまとまりのあるものをくぼみの中に入れると見栄えが良い</h4>
      <div class="well">
        <a href="#" class="btn">戻る</a>
        <a href="#" class="btn btn-primary">送信</a>
      </div>

      <h4>引用だけは、くぼみの中に入れた場合、左ボーダーの透明度が少し変わる</h4>
      <div class="well">
        <blockquote>
          <p>カレーライスとは、玄奘三蔵（三蔵法師）が当時のインドである天竺から持ち帰った、大変ありがたい食べ物（料理）である。なお、ライスカレーというものもあるが、前者が皿の左側にカレーを盛り、右側にライスを盛ったものであるのに対し、後者は皿の左側にライスを盛り、右側にカレーを盛ると言うもので、いずれも食べるときに混ぜるという行為をエンジョイできる「わくわくフーズ」である。</p>
          <small>カレーライス</small>
        </blockquote>
      </div>
    </div>
  </body>
</html>