taro 引入部分bootstrap 样式

冰奕辰

于 2020-01-15 15:48:39 发布

阅读量855

点赞数

分类专栏： taro 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/liul99/article/details/103990595

版权

taro 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在 Taro 项目中引入并定制 Bootstrap 的样式，包括安装步骤、引入方法以及示例代码，帮助开发者实现自定义主题色和基础宽度等设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm i bootstrap

引入

在app.scss中写入如下代码即可引入，可以自定义主题色$primary和基础宽度$spacer等

// 引入部分 bootstrap 样式
$spacer: 60px;
$enable-print-styles: false;
$border-width: 2px;
$border-radius: 8px;
$border-radius-lg: 10px;
$border-radius-sm: 6px;
$rounded-pill: 1600px;
$primary: #07c160;
$nav-link-height:15px;
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
$grid-breakpoints: map-remove($grid-breakpoints, "sm", "md", "lg","xl");
$box-shadow-sm: 4px 8px rgba($black, .075);
$box-shadow: 0 16px 32px rgba($black, .15);
$box-shadow-lg: 0 32px 96px rgba($black, .175);
@import "~bootstrap/scss/utilities";