修改Bootstrap 记录

本文实在读<<Bootstrap实战>>后写的,里面实践的东西挺多,如果能照着书的代码敲一敲的话.可以满足你基本的布局需求,可是Bootstrap的JS方面提及得不多,需要好好看下源码.

本文会写几个在实际项目中改了的地方.

0. 前面的工作

下载Bootstrap的时候不建议下载编译后的代码,下载完整项目源代码,那按模块修改模块,效果棒棒哒.主要用到下面两个工具.

  1. sass 可以参考
  2. grunt 可以参考

1. 设置最大宽度

因为设计图主题显示区域为967 但是Bootstrap在1200+分辨率下 .container的宽度为1170,所以需要修改_variable.scss

// Large screen / wide desktop
// MaiZhiKun $container-large-desktop:      (1140px + $grid-gutter-width) !default;
$container-large-desktop:      (937px + $grid-gutter-width) !default;

2. 修改导航条

导航栏相关样式_navbar.sass,相关变量_variables.scss

  1. 默认灰改成透明

     !-- _variables.scss -->
 $navbar-default-bg:                transparent;

  2. 消除导航栏圆角

     <!-- _variables.scss -->
 $border-radius-base:        0 ;
 $border-radius-large:       0 ;
 $border-radius-small:       0 ;

  3. 改变导航栏中 居中和悬浮的效果

     position: absolute !important;
 top: 0; left: 0; bottom: 0; right: 0;

    参考链接:http://blog.csdn.net/freshlover/article/details/11579669 http://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

  4. 导航栏增加上下间距

     <!-- _variables -->
 $navbar-height:                    50px !default;

3修改轮播图

要做的事情

  1. 将轮播变成三块显示,而非隐藏

    调试过程中,最好将轮播效果取消掉.这里偷懒下,把轮播时间间隔改得大点.修改carousel.js

       Carousel.DEFAULTS = {
     interval: 50000000000000000000,
     pause: 'hover',
     wrap: true,
     keyboard: true
   }

记录一些坑点

  1. JS混乱

    我导入了bootstrap.js,然后我又压缩了其代码.

    我用的是grunt然后Gruntfile.js写的是*.js导致JS按文件名字顺序压缩,导致JS报错.

    应该按Bootstrap官方源代码的Gruntfile.js顺序.

前端

Comments