109への道を開い測定：リストブートストラップ

ブートストラップリスト
ブートストラップのラベルを導入
もともと効果
レベル表示
ブートストラップリスト
コンボボックスの一覧を表示
コンビネーションボックスプラス後の備考
ハイライト
ラベルのリスト
<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>ブートストラップ布局</ TITLE> 
    <！ -网页源数据跨平台兼容做一些说明- > 
    <META HTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <！ -跨屏自适应说明- > 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1 "> 

    <リンクのhref =" https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css "のrel = "スタイルシート"> 
    <スクリプトSRC =" HTTPS ：//cdn.bootcss.com/jquery/2.2.4/jquery.min.js "> </ SCRIPT> 
    <スクリプトSRC =" https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js /bootstrap.min.js "> </スクリプト> 
</ HEAD> 
<BODY> 
<H1>ブートストラップリスト</ H1> 

<！ -もともと効果- > 
<UL> 
    <LI>ホームます。</ li>
    <LI> 
        製品
        <UL> 
            <LI>電話</ LI> 
            <LI> PC </ LI> 
        </ UL> 
    </ LI> 
    </ LI>について<LI> 
    <LI>連絡先</ LI> 
</ UL> 

<！ -レベルの表示- > 
<ulのクラス= "リスト-インライン"> 
    <LI>ホーム</ LI> 
    <LI>製品</ LI> 
    <LI> </ LI>について
    < LI>連絡先</ LI> 
</ UL> 

<！ -ブートストラップ- > 
<！ -リストのコンボボックス- > 
<divのクラス= "コンテナ"> 
    <DIV CLASS = "行"> 
        <divのクラス= "MD - COL 3。"> 
            <ULクラス= "リストグループ"> 
                <LIクラス="リスト基項目">手机</ LI> 
                <LIクラス="リスト基項目">电脑</ LI>
                <LIクラス= "リスト基項目">冰箱</ LI> 
                <LIクラス= "リスト基項目">电视机</ LI> 
            </ UL> 
        </ div> 
    </ div> 
</ DIV > 


<！ -列表组合框加内容- > 
<divのクラス= "コンテナ"> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-3"> 
            <ulのクラス= "リストグループ" > 
                <LIクラス= "リスト基項目">手机<スパンクラス= "バッジ"> 12 </スパン> </ LI> 
                <LIクラス= "リスト基項目">电脑<スパンクラス= "バッジ"> 23 </ span>を</ LI> 
                <LIクラス="リスト基項目">冰箱<スパンクラス="バッジ"> 134 </スパン> </ LI> 
                <LIクラス="リスト基項目">电视机<スパンクラス="バッジ"> 34 </スパン> </ LI> 
            </ UL> 
        </ div>
    </ div> 
</ div> 

<！ -突出显示- > 
<DIV CLASS = "コンテナ"> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-3"> 
            <ULクラス=」リストグループ"> 
                <LIクラス="リスト基項目">手机<スパンクラス="バッジ"> 12 </スパン> </ LI> 
                <LIクラス="リスト基項目アクティブ">电脑<スパンクラス= "バッジ"> 23 </スパン> </ LI> 
                <LIクラス= "リスト基項目">冰箱<スパンクラス= "バッジ"> 134 </スパン> </ LI> 
                <LIクラス= "リスト基項目">电视机<スパンクラス= "バッジ"> 34 </スパン> </ LI>
            </ UL> 
        </ div> 
    </ div> 
</ div> 

<！ -标签列表- > 
<divのクラス= "コンテナ"> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD -6" >
            <ULクラス= "リストグループ"> 
                <a href="#" class="list-group-item"> 
                    标签</ H4>から一个第<H4クラス= "リスト基見出し"> 
                    <Pクラス=「リストグループテキスト」> Loremのイプサムのニンジン、強化されたリベート。もっとオープンマインドを拒否し、
                        本体の現状は不要の発見ない人壮大な古い指名された
                        喜びで処理されているサービスを、</ P>。
                </a>の
               <！ -语义标签- > 
                <HREF =「＃」クラス= 「リスト項目グループ・リスト項目グループの成功」> 
                    <
                    <Pクラス=「リストグループテキスト」> Loremのイプサムのニンジン、強化されたリベート。より開かれた心が拒否し、
                        本体の現状が不要の発見ない人壮大な古い指名された
                        喜びで処理されているサービスを、</ P>。
                </a>の
                 <！ -突出强调- > 
                <HREF =「＃」クラス= 「リスト項目グループがアクティブ」> 
                    <H4クラスは=「リスト・グループ見出し」>第一个标签</ H4>から
                    <Pクラス=「リストグループテキスト」> Loremのイプサムのニンジン、強化されたリベート開発者。もっとオープンマインドを拒否します
                        本体現状が不要の発見ない人壮大な古い指名された
                        喜びで処理されているサービスを。</ P> 
                </a>の
            </ UL> 
        </ DIV> 
    </ DIV> 
</ DIV> 


</ body> 
</ htmlの>
109への道を開い測定：リストブートストラップ

おすすめ
