前提条件 :
- 已安装 Ruby
- 已经安装 Sass
- 已经安装 Compass
安装ruby注意:
安装sass:gem install sass
安装conpass:gem install compass
检验是否安装成功:ruby -v gem -v sass -v compass -v
一. 前提条件完成后,安装bootstrap-sass插件:gem install bootstrap-sass
安装完插件后可在ruby的安装目录下看到插件:
二. 新建应用该插件的项目:compass create 【自己的项目名称】 -r bootstrap-sass --using bootstrap
项目结构及styles.scss内容如下:
说明 :在 styles.scss 文件中 我们可以看到 项目已经引入了 bootstrap-sass,其中 @import “bootstrap” 表示 全部的bootstrap的模块 被引入 ,为了制定化bootstrap,我们往往只引入我们需要的 bootstrap模块 进行源码修改,所以这里我们需要重新修改。
三. 定置化bootstrap:
1. 定制化:拷贝_bootstrap.scss 内容为你项目/sass/_bootstrap-custom.scss (也就是新建一个_bootstrap-custom.scss 文件,内容是_bootstrap.scss 里的内容)
2. 修改:/sass/styles.scss 中的 @import ‘bootstrap’ 为如下:
@import 'bootstrap-custom';
然后修改 _bootstrap-custom.scss 可以根据自己的需要取舍相应的 bootstrap模块
_bootstrap-variables.sass 是 bootstrap 的变量文件,可以修改其中的变量,制定自己的样式大小与颜色(针对于bootstrap中的-variables.sass默认颜色配置)。
_bootstrap-custom.scss 文件内容
/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins
@import "bootstrap/variables"; //变量模块
@import "bootstrap/mixins"; //方法,函数模块
// Reset and dependencies
@import "bootstrap/normalize"; //重置样式模块
@import "bootstrap/print"; //打印样式模块
@import "bootstrap/glyphicons"; //图标模块
// Core CSS
@import "bootstrap/scaffolding"; //脚手架:主要是对body,html等标签进行定制化的reset
@import "bootstrap/type"; //排版模块
@import "bootstrap/code"; //代码模块
@import "bootstrap/grid"; //栅格模块
@import "bootstrap/tables"; //表格模块
@import "bootstrap/forms"; //表单模块
@import "bootstrap/buttons"; //按键模块
// Components
@import "bootstrap/component-animations"; //组件动画模块
@import "bootstrap/dropdowns"; //下拉菜单模块
@import "bootstrap/button-groups"; //按键组模块
@import "bootstrap/input-groups"; //输入组模块
@import "bootstrap/navs"; //导航模块
@import "bootstrap/navbar"; //导航条模块
@import "bootstrap/breadcrumbs"; //路径导航模块
@import "bootstrap/pagination"; //分页模块
@import "bootstrap/pager"; //页数模块
@import "bootstrap/labels"; //标签模块
@import "bootstrap/badges"; //微章模块
@import "bootstrap/jumbotron"; //巨幕模块
@import "bootstrap/thumbnails"; //缩略图模块
@import "bootstrap/alerts"; //警告模块
@import "bootstrap/progress-bars"; //进度条模块
@import "bootstrap/media"; //媒体模块
@import "bootstrap/list-group"; //列表组模块
@import "bootstrap/panels"; //面板模块
@import "bootstrap/responsive-embed"; //具有响应式内容的嵌入模块
@import "bootstrap/wells"; //Well模块
@import "bootstrap/close"; //关闭按钮模块
// Components w/ JavaScript
@import "bootstrap/modals"; //模态框模块
@import "bootstrap/tooltip"; //提示信息模块
@import "bootstrap/popovers"; //弹出框模块
@import "bootstrap/carousel"; //carousel模块
// Utility classes
@import "bootstrap/utilities"; //工具模块
@import "bootstrap/responsive-utilities"; //自适应工具模块
根据自己的项目的实际需要,对模块进行取舍,不需要的模块注释掉,对默认的变量进行修改,这样你得到的 boostrap就是一个你制定的规则样式
补充:
当使用compass compile进行编译时,会从ruby安装目录中安装的boot-sass插件中调用bootstrap里的scss相关代码,因此工程里不需要放源码里的scss文件,但是,当前增加scss文件需要调用源码的里方法或者变量时不会有智能提示,而编译又是可以通过的,为了有智能提示建议将bootstrap-sass-3.3.7\assets\stylesheets\bootstrap文件夹复制一份到工程里,源码里代码尽量不要修改,我们自己的内容放到另外一个文件夹里。
bootstrap-sass插件说明:
核心文件组织结构:
bootstarp
|--Core variables and mixins //核心参数和混入(类似函数)
|-- variables //核心参数设置
|-- mixins //各种混入
|--Reset and dependencies //页面重置和依赖
|-- normalize //https://github.com/necolas/normalize.css
|-- print //打印格式化
|-- glyphicons //http://glyphicons.com/
|--Core CSS //核心组件
|-- scaffolding //脚手架:主要是对body,html等标签进行定制化的reset
|-- type //排版相关
|-- code //代码相关
|-- grid //栅格系统
|-- tables //表格相关
|-- forms //表单相关
|-- buttons //按钮相关
|--Components //组件
|-- component-animations //组件的淡出等动画
|-- dropdowns //点击下拉菜单组件
|-- button-groups //按钮组
|-- input-groups //表单输入组
|-- navs //导航
|-- navbar //导航条
|-- breadcrumbs //面包屑
|-- pagination //分页页码
|-- pager //上一页下一页分页
|-- labels //标签
|-- badges //徽章
|-- jumbotron //超大屏
|-- thumbnails //缩略图
|-- alerts //警告
|-- progress-bars //进度条
|-- media //多媒体对象
|-- list-group //列表组
|-- panels //面板(容器)
|-- responsive-embed //响应式嵌入
|-- wells //一种会引起内容凹陷显示或插图效果的容器
|-- close //关闭按钮
|--Components w/ JavaScript //需要与js交互的组件
|-- modals //模态框
|-- tooltip //工具提示
|-- popovers //弹出框
|-- carousel //轮播
|--Utility classes //工具类
|-- utilities //普通工具,如清除浮动等
|-- responsive-utilities //响应式布局相关