zoukankan      html  css  js  c++  java
  • 使用SCSS扩展Bootstrap4

    摘要

    因为打算写一个小网站,而个人时间又不是那么充裕,所以没有选择前后端分离的架构。

    对于非前后端分离应用来说,Bootstrap应该是目前的最佳前端框架之一了。

    而Bootstrap4,是Bootstrap的最新版本,其更新内容中,有关自定义扩展的支持,相对来说要比以前方便很多。

    注:SCSS与SASS本质上是一样的,只不过在语法层面上来说,SCSS相对更加贴近SASS。所以下文中默认使用SCSS的语法。

    准备

    安装环境

    • 安装npm
    • 安装SASS

    下载源码

    npm install bootstrap
    

    Tips:

    • 不要执行npm install bootstrap4,必须是bootstrap

    目录结构

    • 必须保持下面的目录结构
    your-project/
    ├── scss
    │   └── custom.scss
    └── node_modules/
        └── bootstrap
            ├── js
            └── scss
    

    扩展

    • 使用SASS编译完成自定义的扩展代码后,会将原bootstrap也打包在一起,然后只要引入这一个文件就可以了。
    • 可以使用SASS的组件特性,来扩展bootstrap,这样会在编辑的源码,更加的有结构

    引用Bootstrap

    @import "node_modules/bootstrap/scss/bootstrap";
    

    编译自定义源码

    sass <XXX.scss> <XXX.css>
    

    参考

  • 相关阅读:
    pycharm快捷键
    Docker
    Go语言与Elasticsearch
    Celery与APScheduler
    爬虫入门到入狱
    数据分析
    后台管理
    Linux基础与自动化运维
    微信小程序
    Git
  • 原文地址:https://www.cnblogs.com/sitemanager/p/9134204.html
Copyright © 2011-2022 走看看