ページヘッダー適応スクリーン

<!DOCTYPE HTML> 
<HTML LANG = "ZH-CN"> 
<HEAD> 
    <メタのcharset = "UTF-8"> 
    <META HTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1、ユーザースケーラブル= 0"> 
    <タイトル>タイトル</ TITLE> 

    <! -ブートストラップ核心样式- > 
    <リンクのhref = "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" REL = "スタイルシート"> 
    <スタイル> 
        .LOAD { 
            位置:絶対。
            左:50%; 
            トップ:28px; 
            変換:移動X(-50%)、移動Y(-50%)。
        } 
        {.LOAD 
            色:#999。
            マージン:0 15ピクセル;
        } 
    </スタイル> 
</ HEAD> 
<BODY> 
<NAVクラス= "ナビゲーションバーナビゲーションバー-逆ナビゲーションバーに固定されたトップ"> 
    <DIV CLASS = "コンテナ"> 
        <! -导航头部- > 
        <divのクラス= 「ナビゲーションバーヘッダを『> 
            <a href="#" class="navbar-brand"> 
            </a>の
            <ボタンクラス=』ナビゲーションバー、トグル崩壊」=データトグル=「崩壊」データターゲットを「崩壊」 > 
                <スパンクラス= "アイコンバー"> </ span>の
                <スパンクラス= "アイコンバー"> </ span>の
                <スパンクラス= "アイコンバー"> </ span>を
                <スパンクラス= "アイコンバー"> </ span>を
            </ボタン> 
        </ div> 
        <divのクラス= "崩壊のナビゲーションバー-崩壊">
            <! -默认的导航- > 
            <ulのクラス= "NAVナビゲーションバー-NAV"> 
                <LIクラス= "隠された-XS"> <a href="#">岗位课1 </a>の</ LI> 
                <LIクラス= "隠さ-SM隠さ-XS"> <a href="#">岗位课2 </a>の</ LI> 
                <LIクラス= "隠さ-SM隠さ-XS"> <HREF =」 # ">岗位课3 </a>の</ LI> 
                <LIクラス="隠し-MD隠さ-SM隠さ-XS "> <a href="#">岗位课4 </a>の</ LI> 
                <李クラス= "隠し-MD隠さ-SM隠さ-XS"> <a href="#">岗位课5 </a>の</ LI> 
                <LIクラス= "ドロップダウン">
                    <a href="#" class="dropdown-toggle" data-toggle='dropdown'> 
                        岗位课6  
                        <スパンクラス= "キャレット"> </スパン>
                    </a>の
                    <ULクラス= "ドロップダウン・メニュー"> 
                        <LI> <a href="#">私達について</a>に</ LI> 
                        <LIクラス= "隠された-LG隠さ-MD-SM隠された"> <a href="#">岗位课1 </a>の</ LI> 
                        <LIクラス= "隠し-LG隠さ-MD"> <a href="#">岗位课2 </a>の</ LI> 
                        <LIクラス= "隠さ-LG隠れ-MD "> <a href="#">岗位课3 </a>の</ LI> 
                        <LIクラス="隠れLG "> <a href="#">岗位课4 </a>の< / LI> 
                        <LIクラス= "隠れ-LG"> <a href="#">岗位课5 </a>の</ LI> 
                    </ UL>
                </ LI> 
            </ UL> 

            <フォームクラス= "ナビゲーションバー左隠さ-XS-フォームナビゲーションバー"> 
                <DIV CLASS = "フォームグループ"> 
                    の<input type = "text"のクラス= "フォームコントロール"プレースホルダ= "検索"> 
                </ div>
                <ボタンクラス= "BTN BTN-危険">搜索</ボタン> 
            </ FORM> 

        </ div> 
        <divのクラス= "負荷"> 
            <HREF = "#"クラス= "隠し-LG隠さ-MD hidden- SM ">登录</a>の
            <a href="#" class="hidden-lg hidden-md hidden-sm">注册する</a> 
        </ DIV> 
    </ DIV> 
</ NAV> 

<スクリプトSRC = "https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </ SCRIPT> 
<スクリプトSRC = "https://cdn.bootcss.com/bootstrap/3.3.7/js /bootstrap.min.js "> </ SCRIPT> 
</ BODY> 
</ HTML>

  

おすすめ

転載: www.cnblogs.com/qianjinyan/p/10941769.html