Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)

介绍

Bootswatch是一个免费的Bootstrap主题集合项目,目前一共包括22款主题,可针对不同版本进行使用,虽然默认的Bootstrap主题已经相当不错,但是毕竟不够丰富,特别是针对现代化的Web开发,网站主题也成为了一个产品加分点,满足不同人群的审美观也变得更加重视,不谈雪中送炭,但绝对是锦上添花!


Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


Github

https://github.com/thomaspark/bootswatch/


Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


特点

  • 易于安装

只需下载一个CSS文件,然后将其替换为Bootstrap中的文件即可,不要搞乱十六进制值。

  • 自定义

更改仅包含在两个SASS文件中,从而可以进行进一步的自定义并确保向前兼容。

  • 开放源代码

Bootstrap主题根据MIT许可证发布,并由社区在GitHub上维护。

  • 插件

API可用于与您的平台集成。由NodeBB,BootSnap等使用。

  • 保持更新

一直保持更新以确保兼容

主题预览

以下截图只是截取部分样式,具体如何可以直达Github到官方文档,一共22款主题,一起来欣赏下:

  • Cerulean

是一种天蓝色的风格。

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Cosmo(宇宙)

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Cyborg

黑色和电蓝色

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Darkly(Flat黑)

Flat风格主题

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Flat亮

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Journal

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Litera

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Lumen

光影主题

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Lux

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Materia

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Minty

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Pulse

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Sandstone

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)

  • Simplex

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Sketchy

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Slate

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Solar

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Spacelab

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • SuperHero

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • United

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


  • Yeti

Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


安装使用

可以通过几种不同的方式将Bootswatch集成到项目中:

1、下载与主题关联的bootstrap.min.css(或者使用cdn)文件,并替换Bootstrap的默认样式表。您仍然必须包含Bootstrap的JavaScript文件,以具有功能下拉菜单,模态等。

2、如果在项目中使用Sass(SCSS),则可以导入给定主题的_variables.scss和_bootswatch.scss文件。此方法使您可以覆盖主题变量。

// Your variable overrides go here, e.g.:// $h1-font-size: 3rem;@import \”~bootswatch/dist/[theme]/variables\”;@import \”~bootstrap/scss/bootstrap\”;@import \”~bootswatch/dist/[theme]/bootswatch\”;

确保在_variables.scss和bootswatch.scss之间导入Bootstrap bootstrap.scss!

3、使用npm安装

npm install bootswatch


4、自定义

Bootswatch是开源的,可以修改主题。每个主题由两个SASS文件组成。_variables.scss(默认包含在Bootstrap中),可以自定义设置。_bootswatch.scss引入了更广泛的结构更改。


总结

Bootstrap主题网络上有不少,也不乏也有很多优秀的,bootswatch目前集成了22款主题,你可以用于自己的项目,为项目增添亮点,符合更多人的审美观!


Github开源的22款优秀的Bootstrap免费主题项目——Bootswatch(bootstrap开源模板)


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年7月8日 下午7:44
下一篇 2024年7月9日 上午8:10

相关推荐