发布于 2017-08-18 18:16:42 | 34 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap入门,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


这篇文章主要介绍了Bootstrap响应式导航由768px变成992px,需要的朋友可以参考下

废话不多说了,直接给大家贴代码了,具体代码如下所示:


<!--响应式导航部分--> 
<header role="banner"> 
  <nav role="navigation" class="navbar navbar-static-top navbar-default"> 
    <div class="container "> 
      <div class="navbar-header"> 
        <!--设置手风琴式的navbar,然后类navbar-toggle包装在屏幕大于992px,隐藏--> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
          <!--这里的span.icon-bar 是用来在按钮中画三条线--> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="index.html" rel="external nofollow" rel="external nofollow" ><img src="img/logo.png" alt="Bootstrappin'" width="120"></a> 
        <!--这里的商标图一定要设置宽度--> 
      </div> 
      <!--这里的类collapse保证默认包裹的菜单是隐藏的,如果 替换为 in 则显示--> 
      <div class="navbar-collapse collapse" id="navbar-collapse"> 
        <ul class="nav navbar-nav"> 
          <li class="active"><a href="index.html" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-home "></span> Home</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-desktop"></span> Portfolio</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-group "></span> Team</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-envelope "></span> Contact</a></li> 
        </ul> 
      </div><!--/.nav-collapse --> 
    </div><!--/.container --> 
  </nav> 
</header> 

这是我跟着做的一个实例,看上面第一个注释,button定义了类navbar-toggle。navbar-toggle其中的一个样式是媒体查询。


//bootstrap.css 
@media (min-width: 992px) { 
 .navbar-toggle { 
  display: none; 
 } 
} 

然后我又查看了下navbar.less文件。发现


//navbar.less  
.navbar-toggle { 
 position: relative; 
 float: right; 
 margin-right: @navbar-padding-horizontal; 
 padding: 9px 10px; 
 .navbar-vertical-align(34px); 
 background-color: transparent; 
 border: 1px solid transparent; 
 border-radius: @border-radius-base; 
 // Bars 
 .icon-bar { 
  display: block; 
  width: 22px; 
  height: 2px; 
  border-radius: 1px; 
 } 
 .icon-bar + .icon-bar { 
  margin-top: 4px; 
 } 
 @media (min-width: @grid-float-breakpoint) { //@grid-float-breakpoint 
  display: none; 
 } 
} 
//variables.less 
@grid-float-breakpoint:   @screen-sm-min;  //想要改成992px这里就要用这个 @grid-float-breakpoint:   @screen-md-min; 
//-------- 
@screen-sm:         768px; 
@screen-sm-min:       @screen-sm; 
@screen-md:         992px; 
@screen-md-min:       @screen-md; 
@screen-desktop:       @screen-md-min; 
// Large screen / wide desktop 
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 
@screen-lg:         1200px; 
@screen-lg-min:       @screen-lg; 
@screen-lg-desktop:     @screen-lg-min; 

所以,如果你想修改默认的折叠断点,就将上面的媒体查询变量 @grid-float-breakpoint:     @screen-sm-min;

修改为其他Bootstrap定义的断点,当然也可以自定义一个断点变量。然后重新编译为css文件即可。

注:最好把 variables.less 复制一份为 _variables.lss。navbar.less 复制一份 _navbar.less。然后在复制的文件上修改。最后将 bootstrap.less 复制一份 __bootstrap 将其中的导入


//__bootstrap.less 
//@import "navbar.less";  
@import "_navbar.less"; 
//@import "variables.less"; 
@import "_variables.less"; 

修改完,编译自定义的 __bootstrap.less 即可。

以上所述是小编给大家介绍的Bootstrap响应式导航由768px变成992px的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phperz胜博发888手机平台的支持!



相关阅读 :
Bootstrap响应式导航由768px变成992px的实现代码
Bootstrap每天必学之响应式导航、轮播图
Bootstrap实现响应式导航栏效果
Bootstrap Navbar Component实现响应式导航
谈一谈bootstrap响应式布局
20分钟成功编写bootstrap响应式页面 就这么简单
Bootstrap 响应式实用工具
Bootstrap 响应式设计
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Bootstrap多级导航栏(级联导航)的实现代码
Bootstrap+jfinal退出系统弹出确认框的实现方法
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
最新网友评论  共有(0)条评论 发布评论 返回顶部
月排行榜

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  服务