Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、Button and Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells_html/css

Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、Button and Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:59:16

オリジナル

1409 人が閲覧しました

この記事の主な内容:

■ ページヘッダー
■ ブレッドクラム
■ ボタングループ
■ ドロップダウン
■ ボタンドロップダウン
■ ボタンとドロップダウンを使用して選択をシミュレートする
■ 入力グループ
■ サムネイル
■ パネル
■ ウェル

□ ページヘッダー

ページヘッダーとは、ページの上部を指します。

            <div class="page-header">                <h1>超级球迷</h1>                <p class="text-warning">关于我们</p>            </div>

ログイン後にコピー

上記の div はページの先頭に表示されます。

□ ブレッドクラム

ブレッドクラム。

 <div class="page-header">  <ol class="breadcrumb">  <li><a href="/">主页</a></li>  <li class="active"><a href="/">关于我们</a></li>  </ol>  <p class="text-warning">关于我们</p>  </div>

ログイン後にコピー

上、OLの部分はパン粉です。

□ ボタングループ

は複数のボタンで構成されていますが、見た目は 1 つのボタンです。

 <div class="row">  <div class="col-md-6 btn-group">  <button class="btn btn-success">按钮1</button>  <button class="btn btn-success active">按钮2</button>  <button class="btn btn-success">按钮3</button>  </div>  </div>

ログイン後にコピー

btn-group-vertical: ボタングループは垂直方向に配置されます
btn-group-sm: ボタングループは小さなボタンによって水平方向に配置されます

ラジオのグループと data-toggle="buttons"属性、クリック特定のラジオの場合、ボタンが押されます。 E e e e

 <div class="row">  <div class="btn btn-group-sm" data-toggle="buttons">  <label class="btn btn-success"><input type="radio"/>The Dude</label>  <label class="btn btn-success"><input type="radio"/>Donny</label>  <label class="btn btn-success"><input type="radio"/>Maude</label>  </div>  </div>

ログイン後にコピー

□ □ ドロップダウン

ボタンをクリックしてドロップダウンオプションを表示します。

            <div class="row">                <div class="dropdown">                    <button class="btn btn-sm btn-success" data-toggle="dropdown">点我</button>                    <ul class="dropdown-menu">                        <li><a href="#" tabindex="-1">Walter</a></li>                        <li><a href="#" tabindex="-1">Bunny</a></li>                        <li class="divider"></li>                        <li class="disabled"><a href="#" tabindex="-1">The Big</a></li>                    </ul>                </div>            </div>

ログイン後にコピー

□ ボタンドロップダウン

ボタングループとドロップダウンを結合し、ボタングループ内のボタンをクリックしてドロップダウンを表示します。

            <div class="row">                <div class="btn-group btn-group-sm" data-toggle="buttons">                    <label class="btn btn-success"><input type="radio"/>The Dude</label>                    <label class="btn btn-success"><input type="radio"/>Donny</label>                    <label class="btn btn-success"><input type="radio"/>Maude</label>                    <div class="btn-group btn-group-sm">                        <button class="btn btn-success" data-toggle="dropdown">Other<span class="caret"></span></button>                        <ul class="dropdown-menu">                            <li><a href="#" tabindex="-1">Walter</a></li>                            <li><a href="#" tabindex="-1">Bunny</a></li>                            <li class="divider"></li>                            <li class="disabled"><a href="#" tabindex="-1">The Big</a></li>                        </ul>                    </div>                </div>            </div>

ログイン後にコピー

ボタンと矢印ボタンを2つのボタンに分離することもできます。

<button class="btn btn-success">Other</button><button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>

ログイン後にコピー

□ ボタンとドロップダウンを使用して、Select

html 部分をシミュレートします。

うわー

下矢印をクリックして [ドロップダウン] オプションを選択するときは、pickButton の ID を持つボタンにオプションを表示する必要があります。

js フォルダーに site.js ファイルを作成します。

            <div class="row">                <div class="dropdown">                    <button class="btn btn-success" id="pickButton">请选择...</button>                    <button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>                    <ul class="dropdown-menu" id="reasonDropdown">                        <li><a href="#" tabindex="-1">Adoration</a></li>                        <li><a href="#" tabindex="-1">Ordering a White Flower</a></li>                        <li><a href="#" tabindex="-1">I am lost</a></li>                    </ul>                </div>            </div>

ログイン後にコピー

site.js をページの一番下に置きます。

□ 入力グループ

入力グループとは、入力が他の要素と組み合わされて統合された効果を提示することを意味します。

(function() {    "use strict";    var $pckButton = $("#pickButton");    $("#reasonDropdown li a").on("click", function() {        var reason = $(this).text();        $pckButton.text(reason);    });})();

ログイン後にコピー

□ ページネーション

            <div class="row">                <div class="input-group">                    <span class="input-group-addon">Name</span>                    <input type="text" class="form-control" name="userName" placeholder="输入用户名"/>                </div>                          </div>

ログイン後にコピー

デジタルページネーションでも可能です。

 <div class="row">  <ul class="pager">  <li class="previous"><a href="#">&larr; 上一页</a></li>  <li class="next"><a href="#">下一页 &rarr;</a></li>  </ul>  </div>

ログイン後にコピー

□ サムネイル

class="thumbnail" 属性を div に追加すると、画像とテキストのレイアウトが容易になります。

            <div class="row">                <ul class="pagination pagination-lg">                    <li class="previous"><a href="#">&larr; 上一页</a></li>                    <li><a href="#">1</a></li>                    <li><a href="#">2</a></li>                    <li><a href="#">3</a></li>                    <li class="next"><a href="#">下一页 &rarr;</a></li>                </ul>                         </div>

ログイン後にコピー

□ パネル

パネルとして設定された div では、パネルのタイトル部分とパネルの本文部分を持つことができます。

            <div class="row">                <div class="col-md-4 col-sm-6">                    <div class="thumbnail">                        <a href="#"><img src="images/18.jpg" class="img-responsive" alt="18"/></a>                        <div class="caption">                            <h3>赛事消息</h3>                            <p>                                当比赛进行到第6分钟时，郜林近距离攻门被托莱奇封堵，在郜林示意托莱奇有手球时，迪亚曼蒂在球门另一侧的抢射被对手封堵挡出。主裁判哈桑没有理会郜林的投诉，慢镜头显示托莱奇确实有手球。                            </p>                        </div>                    </div>                </div>                      </div>

ログイン後にコピー

□ Wells

well に設定された div では、この div は表示時に強調表示され、強力な背景効果があります。

            <div class="row">                <div class="panel panel-default">                    <div class="panel-heading">                        <h2>标题</h2>                    </div>                    <div class="panel-body">                        <p>                            全场比赛伤停补时阶段，最具争议性的判罚出现了。在一次拼抢中，刘健背后对萨巴犯规，萨巴随机倒地，张琳?有一个抬腿动作，试图避免踩到萨巴，萨巴却捂着脸在地上剧烈翻滚。                        </p>                        <img src="images/19.jpg" alt="19" class="img-thumbnail"/>                    </div>                </div>                  </div>

ログイン後にコピー

riference：wilderminds