1

Twitterブートストラップを使用してWebサイトを構築しています。スマートフォンやタブレット端末向けにウェブサイトを具体的にターゲティングしたいと考えています。ナビゲーション バーは、スマートフォンと iPad (ポートレート モード) デバイスで完全に折りたたまれています。iPad ランドスケープ モードや大型デスクトップなどの高解像度デバイスには、同じ折りたたまれたナビゲーション バーが必要です。

bootstrap-responsive.css ファイルで、幅を 979px から 1024px や 1200px などのより高い解像度に最大化できる場合、それは機能しました。これは正しいアプローチですか？

Navbar スニペット

    <div class="navbar navbar-fixed-top navbar-absolute">
      <div class="navbar-inner">
        <div class="container" style="width: auto;">
          <a class="btn btn-navbar custom-collapse-btn" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="http://www.test.com/" target="_blank"><img src="img/logo.png" border="0" /></a>
          <div class="pull-right icon-custom-search"></div>
          <div class="nav-collapse">
            <ul class="nav">          
              <li>
                <ul class="nav" id="nav-menu-left">
                  <li><a href="#">LMenu1</a></li>
                  <li><a href="#">LMenu2</a></li>
                  <li><a href="#">LMenu3</a></li>
                  <li><a href="#">LMenu4</a></li>
                  <li><a href="#">LMenu5</a></li>
                  <li><a href="#">LMenu6</a></li>
                </ul>
              </li>
              <li>
                <ul class="nav" id="nav-menu-right">
                  <li><a href="#"><img src="img/icon-newsletter.png" border="0" /> Rmenu1</a></li>
                  <li><a href="#"><img src="img/icon-register-login.png" border="0" /> Rmenu2</a></li>
                  <li><a href="#"><img src="img/icon-download-app.png" border="0" /> RMenu3</a></li>
                </ul>
              </li>
              <div id="nav-copyright-text"><a href="#">This is test text/a></div>          
            </ul>
          </div><!-- /.nav-collapse -->
        </div>
      </div><!

-- /navbar-inner -->
</div>

ナビゲーションバーのカスタム CSS

.navbar-inner {
    background-color: #13417c !important; 
    background-image: none;
    background-repeat: no-repeat;
    filter: none;
    padding:0 !important;
    border: 1px solid #000000;
}

.navbar .btn-navbar {
    padding:15px 10px;
    margin-right:0;

}
.navbar .btn {
    margin-top:0;
    margin-left:0;
}
.navbar-inner .btn-navbar {
    background: black;
}

.navbar .btn-navbar:hover {
    background: black;
    color:black;    
}

.navbar .btn-navbar:focus, .navbar .btn-navbar:active {
    background: black;
    color:black;    
}

#rotate    {  
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    /* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
    -ms-transform:rotate(90deg);

}

.icon-custom-search {
    color: #fffafe;
    background: url('../img/search_bg.png') no-repeat;
    height: 43px;
    padding-left: 46px;
}

.custom-collapse-btn {
    border-radius: 0 !important;
    -webkit-border-radius:0 !important;
    -moz-border-radius:0 !important;
}

.nav-collapse.collapse {
    background-color: #000000;
}

.navbar .nav > li {
    line-height: 16px;
}

.nav-collapse .nav > li > a:hover {
    background-color:#000000;
}
.nav-collapse .nav > li > a {
    text-shadow:none;
}

#nav-menu-left {
    width:49%;
    float:left;
    border-right: 1px solid #808080;
    margin-top: 20px;
}

#nav-menu-right {
    width:50%;
    float:left;
    margin-top: 20px;
}

#nav-menu-left > li > a {
    color: #ffffff;
}

#nav-menu-right > li > a {
    color:#85b3e5;
    font-weight: normal;
}

#nav-menu-right > li > a > img {
    padding-right:10px;
}

#nav-copyright-text {
    clear:both;
}
#nav-copyright-text a {
    color: #666666;
    font-weight: bold;
    padding: 10px;
}

#nav-copyright-text {
    text-align: center; 
}

#nav-copyright-text a:hover{
    text-align: center;
    text-decoration: none;
}
4

1 に答える 1

2

コアファイルを編集するのは悪い考えです。メディア クエリを利用して、タスクを完了させるよう主張しました。

<link rel='stylesheet' media='screen and (min-width: 979px) and (max-width: 1024px)' href='css/medium.css' />

タスクをより効率的に完了できます。

于 2013-05-02T06:01:57.423 に答える