ブートストラップの知識のヒント_html/css_WEB-ITnose-htmlチュートリアル-php.cn

年末にやるべきプロジェクトがないので、最近構築した Web サイトで使用するブートストラップの知識を整理します

1. ブートストラップスタイルとスクリプトをインポートします

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />    <script src="js/bootstrap.min.js" type="text/javascript"></script>

ログイン後にコピー

<div class="navbar navbar-fixed-top">        <div class="navbar-inner">            <div class="container">                <a class="brand pull-left" href="#">RenderKa                </a>                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">                    <span class="icon-bar"></span>                    <span class="icon-bar"></span>                    <span class="icon-bar"></span>                </a>                <div class="nav-collapse collapse">                    <div class="icon_home"><a href="Index.aspx" target="_blank">CN</a>/EN</div>                             <ul id="nav-list" class="nav pull-right">                        <li><a href="#price">Price</a></li>                        <li><a href="#support">Support</a></li>                        <li><a href="#workflow">Workflow</a></li>                        <li><a href="#contact">Contact</a></li>                    </ul>                </div>            </div>        </div>    </div>

ログイン後にコピー

1 ,. navbar クラス クラスを追加します .navbar-fixed-top: ページの上部にナビゲーションバーを固定することを意味します

2: さまざまな方法で表示します。

3. .pull-left: 左揃え

4, ナビゲーションバーにレスポンシブ機能を追加するには、折りたたむコンテンツをクラスで

で囲む必要があります。 .collapse、.navbar-collapse。折りたたまれたナビゲーションバーは、実際にはクラス .navbar-toggle と 2 つの data- 要素を持つボタンです。 1 つ目は data-toggle で、JavaScript にボタンの処理を指示します。2 つ目は data-target で、どの要素に切り替えるかを示します。 .icon-bar クラスの 3 つのは、いわゆるハンバーガーボタンを作成します。これらは .nav-collapse

の要素に切り替わります。

3. レイアウトコンテナ

<div class="container  container-fluid">        <div class="row-fluid" id="workflow">              <h1 class="page-title" >Workflow                    <a href="#price" class="arrow-top">                        <img src="img/arrow-top.png">                    </a>            </h1>             <div class="span2" style="font-size:13px;"><img src="img/kefu1.jpg" />                contact our customer service via Skype or email to place your order            </div>            <div class="span1" style="margin-top:50px;"><img src="img/Arrows.jpg" /></div>            <div class="span2" style="font-size:13px;"><img src="img/wendong1.jpg" />                upload your archived scene file including all materials and setups            </div>            <div class="span1" style="margin-top:50px;"><img src="img/Arrows.jpg" /></div>            <div class="span2" style="font-size:13px;"><img src="img/times1.jpg" />               we will send testframes to confirm that everything works fine at our end after your confirmation we will proceed start rendering            </div>            <div class="span1" style="margin-top:50px;"><img src="img/Arrows.jpg" /></div>            <div class="span2" style="font-size:13px;"><img src="img/xiazai1.jpg" />                after we received the payment we will send the files via dropbox or ftp            </div>                   </div>      </div>

ログイン後にコピー

1. .container クラス: 固定幅とレスポンシブレイアウトをサポートするために使用されるコンテナ

2. 100% の幅を占有するために使用されます。コンテナすべてのビューポート

3. 1 行に最大 12 個のスパン

4. スクロール監視

1. js を導入します:

著者別の最新記事