booterStrap体验-首页改造-响应式导航栏（2）

最新推荐文章于 2024-04-07 10:48:58 发布

Zerofishcoding

最新推荐文章于 2024-04-07 10:48:58 发布

阅读量748

点赞数

分类专栏： booterstrap 文章标签：响应式导航 booterstra

本文链接：https://blog.csdn.net/Zerofishcoding/article/details/78378396

版权

booterstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如果按照上一篇提到的方法，得到的结果如下所示：
响应式导航

       之所以出现这种情况是因为在html中将汉堡菜单和logo写在了同一个div里，并且这两个在booterstrap样式里是分别左右浮动。
       为了达到原图所要的效果，得用到booterstrap中另一个重要的概念：栅格系统。
       在booterstrap官方说明文档里是这么解释的（案例如下）：

 <div class="row">
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　......
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
</div>

每一个“row”代表一行，而内部的“col-md-数字”代表一个单元格；Bootstrap把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份。设置好后就可以在被分配好的单元格内填写想要的内容了。
与此同时，还要注意栅格系统单元格可以根据屏幕大小来使用不同的类。

.col-xs-　　无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；
.col-sm-　　屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；
.col-md-　　屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；
.col-lg-　　屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；

以上的类可以混合一起用，达到控制在某个特定范围内单元格的显示方式，例如同时使用.-col-sm-和.col-md-可以控制在屏幕大于992小于1200时，显示为-col-sm所在的内容。大于则按照.col-md-设定的进行显示。
在学习了栅格系统之后，将要改造的导航栏html代码修改为：

<nav class="navbar navbar-default" role="navigation">
                <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle pull-left collapsed" data-toggle="collapse" data-target="#example-navbar-collapse" aria-expanded="false">                   
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand col-xs-12 pull-right" href="#"><span>GIRL’s</span> DRESS</a>
                </div>

                <div class="navbar-collapse collapse" id="example-navbar-collapse" aria-expanded="false" style="height: 1px;">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">品牌理念</a></li>
                        <li><a href="#">女士时尚</a></li>
                        <li><a href="#">时尚资讯</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                </div>
                </div>
            </nav>

给logo加上.-col-xs-12,当屏幕小于768px时，显示为整行；加上.pull-right类，强制（float:right！important）将logo设定为向右浮动，就能实现原设计图想要的效果：在小屏幕下，汉堡菜单按钮和logo分别占一行。
导航效果2
别的样式就得仔细调整，覆盖booterstrap原有样式。其中汉堡菜单按钮和logo不同的背景色，是先将这两个的共有容器设置为红色，再将logo的所在容器的背景颜色设置为黑色。