资讯专栏INFORMATION COLUMN

使用SCSS扩展Bootstrap4

Vultr / 2817人阅读

摘要:对于非前后端分离应用来说,应该是目前的最佳前端框架之一了。所以下文中默认使用的语法。可以使用的组件特性,来扩展,这样会在编辑的源码,更加的有结构引用引用编译自定义源码编译自定义源码参考参考

摘要

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

对于非前后端分离应用来说,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  

参考

  • Theming Bootstrap
  • SASS

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2183.html

相关文章

  • bootstrap4.0 css架构

    摘要:原子性的默认变量一般是用来设置默认值,然后根据需求来覆盖的。语义化的变量名,值为直接的属性值。组件文件互不引用。组合有几个入口文件对组件进行按顺序的引入,形成不同的专用,形成完整可用的样式,注意引用顺序。 原子性 sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的。覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可 存放变量的文件。语义化的变量名,值为直接的属性值。 ...

    solocoder 评论0 收藏0
  • 挑逗Bootstrap4源代码 - Grid篇(下)

    摘要:在这里面有一个新定义的类,它这个嵌入式展开后是,从结构可以看出来,它就是加在元素上的,可以取消列的默认间距。在这里我提供一个自定义的,名字也很简单。写的时候注意顺序,要按照升序排列,小的放在上面,即在上面,写反了将失效。 本文所引用的版本为Bootstrap 4 Beta版,阅读者请先下载好相关源文件。 时光荏苒,若后续版本代码发生变化,将看心情进行更新补充。如果你觉得本文不错,欢迎...

    fobnn 评论0 收藏0
  • 挑逗Bootstrap4源代码 - Grid篇(上)

    摘要:候补,分别代表两种宽度之间和仅在一种宽度下的情形。这里是一个很重要的变化,大家可以注意到,这里的变成了,这也是主要的改进之一,这个基础构建的变化意味着整个框架在很大程度上都会建立在的基础上滚蛋吧。 本文所引用的版本为Bootstrap 4 Beta版,阅读者请先下载好相关源文件。 时光荏苒,若后续版本代码发生变化,将看心情进行更新补充。如果你觉得本文不错,欢迎评论支持,如需转载请标明...

    wizChen 评论0 收藏0
  • bootstrap4源码阅读体会

    摘要:通过阅读发现了不少知识的盲点和误解,对有了更深入的理解。总结几点印象较深的体会,分享给大家。但是通过阅读源码改变了这种认识模块化很简单灵活,这是其优点,同时也是一个缺点。 欢迎到个人博客参观: 点击这里 bootstrap已经使用了很长时间,但是从来没有好好研究过其设计结构,春节期间闲来无事就阅读了源码。通过阅读发现了不少知识的盲点和误解,对css有了更深入的理解。总结几点印象较深的体...

    incredible 评论0 收藏0
  • Mac系统使用VS Code编译Bootstrap 4

    摘要:使用,已改为使用,所以首先解决编译问题。编译与无关,需要在系统中安装编译环境。使用编译源码结构简单分析源码,其中文件夹包含了所有样式文件源码,部件和工具都是单独的文件,很清晰。可以看到命令已成功运行,及文件已经生成。 环境: macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 ...

    simpleapples 评论0 收藏0

发表评论

0条评论

Vultr

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<