taro 引入部分bootstrap 样式

缺乏、安全感 2023-06-30 06:50 4阅读 0赞

# 安装 #

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";

# 示例 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200115154656146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap引入

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> <script ...

野性酷女/ 2024年04月18日 13:59/ 0 赞/ 73 阅读

相关 Bootstrap引入样式和脚本

引入样式和脚本方式一：下载到本地，导入工程，页面再引用 ![在这里插入图片描述][5169dde5392a48ecb312953f909b01af.png] 方

女爷i/ 2023年09月24日 16:56/ 0 赞/ 4 阅读

相关 taro 引入部分bootstrap 样式

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

缺乏、安全感/ 2023年06月30日 06:50/ 0 赞/ 4 阅读

相关 html引入bootstrap,Webpack如何引入bootstrap的方法

Bootstrap中是一种事实上的界面标准，标准到现在的网站大量的使用它。如果可以使用webpack引入的bootstrapcss，就可以一个npm install完成项目的依

た入场券/ 2022年10月07日 04:45/ 0 赞/ 250 阅读

相关 bootstrap样式变形

页面使用了Bootstrap的框架。但是在某次写页面的时候，一个按键的显示效果发生了变形：原本的效果应该是： ![SouthEast][] 结果成了： ![So

忘是亡心i/ 2022年06月01日 10:08/ 0 赞/ 259 阅读

相关 angular6学习(四)：引入bootstrap样式框架

两种方法：第一种：引用链接 1、在index.html中添加bootstrap引用链接 bootstrap链接地址可在官网复制：[官网][Link 1] 引用的链接

秒速五厘米/ 2022年05月08日 23:06/ 0 赞/ 339 阅读

相关怎样在jsp中引入bootstrap样式

1、先在WEB-INF中新建一个文件夹，然后在添加css,fonts,js三个文件，如下图：![在这里插入图片描述][20181221185305716.png] 2、引入

超、凢脫俗/ 2022年04月03日 10:18/ 0 赞/ 484 阅读

相关 Angular6开发学习：引入bootstrap样式框架

文章目录 Angular6开发学习：引入bootstrap样式框架第一种：引用链接第二种方法：安装bootstrap框架 Angu

爱被打了一巴掌/ 2021年09月28日 04:16/ 0 赞/ 344 阅读

相关 Taro-样式加载问题

当一个文件目录里有多个文件，且这些文件都引用一个css时，打包小程序并发布以后，会有加载不上样式的问题，这个时候，我们需要把文件做模块化处理，每一个文件对应一个文件目录，并创建

拼搏现实的明天。/ 2021年08月30日 14:30/ 0 赞/ 468 阅读

相关 Taro - 别名引入路径方式

config/index.js const path = require('path') // eslint-disable-line const con

爱被打了一巴掌/ 2021年07月27日 00:09/ 0 赞/ 601 阅读