自定义bootstrap的分页样式

2016年05月27日 原创
关键词: javascript bootstrap
摘要 bootstrap是个被广泛使用的前端框架,但正因为被广泛使用,所以默认的主题有烂大街的感觉。本文介绍如何自定义boostrap中的pagination,其他样式的自定义其实也很类似。

bootstrap是个被广泛使用的前端框架,但正因为被广泛使用,所以默认的主题有烂大街的感觉。本文介绍如何自定义boostrap中的pagination,其他样式的自定义其实也很类似。

第一步,下载源码 http://d.bootcss.com/bootstrap-3.3.5.zip

第二步,安装node.js。https://nodejs.org/en/

安装完成后,打开cmd,输入npm -v 就可以看到当前安装的node packaged modules的版本。

第三步,解压源码到某个目录,然后打开命令行,切换到该目录。

第四步,安装grunt。

  1. 在全局环境中安装 grunt-clinpm install -g grunt-cli
  2. 进入 /bootstrap/ 根目录,然后执行 npm install 命令。npm 将读取 package.json 文件并自动安装此文件中列出的所有被依赖的扩展包。

安装了grunt之后,我们就可以在bootstrap根目录下,用grunt dist命令编译bootstrap的源文件了。

第五步,修改bootstrap的分页样式。

切换到less目录下,打开variables.less。这个less文件保存的是bootstrap样式的变量,我们自定义样式的时候,大部分的样式都只需要修改这里的变量即可。

搜索找到pagination样式定义的地方,然后修改。

第六步,编译得到新的bootstrap样式。

保存修改之后,切换到bootstrap源文件根目录,用命令行执行grunt dist,grunt就会编译我们修改的源文件,在dist目录下生成新的bootstrap。

然后把新生成的bootstrap.min.css引入到原来的项目中即可。

 

博主的pagination就从

变成了