Bootstrap-Sass 源码解析三:Mixins

mixin在sass的语法中是混入的意思,可以传递参数,类似与函数的意思。这里的mixins.scss自然就是定义了一系列混入库,供bootstrap各组件样式调用。

下面根据mixinx.less为目录,解析boostrap-sass中的所有的mixin。

内容:

|-- Utilities                     //各种工具混入
    |-- hide-text                 //隐藏text
    |-- opacity                   //设置透明度
    |-- image                     //响应式图片混入、视网膜混入(根据屏幕显示不同分辨率图片)
    |-- labels                    //label变化混入(移动到labels背景会变色,下面出现的“变化”意思相同)  
    |-- reset-filter              //清除ie9以下背景倾斜
    |-- resize                    //使对象变得可调整大小
    |-- responsive-visibility     //响应式可见和不可见(用于responsive-utilityies)
    |-- size                      //设置大小
    |-- tab-focus                 //针对webkit内核添加选中轮廓
    |-- reset-text                //重置text(用于清除各种text属性)
    |-- text-emphasis             //text强调样式
    |-- text-overflow             //text溢出样式
    |-- vendor-prefixes           //增对个浏览器内核为属性添加前缀的混入都在这里

|-- Components                    //针对各组件的混入
    |-- alerts                    //alerts变化混入
    |-- buttons                   //按钮的变化、设置按钮大小
    |-- panels                    //panel变化
    |-- pagination                //pagination设置大小
    |-- list-group                //list-group-item变化
    |-- nav-divider               //水平分隔(用于dropdowns和nav list)
    |-- forms                     //定义了form验证时的各种样式(错误,警告等)
    |-- progress-bar              //progress-bar变化
    |-- table-row                 //table-row变化

|-- Skins                         //皮肤混入(主要是修改bootstrap的主题皮肤)
    |-- background-variant        //背景变化
    |-- border-radius             //border圆角
    |-- gradients                 //渐变效果

|-- Layout                        //布局相关
    |-- clearfix                  //清除浮动
    |-- center-block              //block居中
    |-- nav-vertical-align        //nav垂直排列的间隔 
    |-- grid-framework            //用于构建网格系统的框架(供下面的grid调用) 
    |-- grid                      //构建网格系统
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值