booterStrap体验-首页改造-响应式导航栏(2)

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

       之所以出现这种情况是因为在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的所在容器的背景颜色设置为黑色。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值