开源软件
您现在的位置是:博客主页 > IT-互联网 > 开源软件

解决bootstrap样式和系统样式冲突方式

By 钱伯斯 on 开源软件 Time 2020-08-28 from:互联网 766人已围观
简介:    Bootstrap是一个最流行的Web前端响应式应用程序开发框架,很多网站界面或者系统界面都是采用它布局,使用熟练那开发起来是非常快速! 前端开发者在网络上看到的很多案例都是采用Bootstrap搭建的案例,所以案例中总是可以看到bootstrap的样式文件和js扩展插件。

什么是 Bootstrap?

Bootstrap 是一个最流行的Web前端响应式应用程序开发框架,很多网站界面或者系统界面都是采用它布局,使用熟练那开发起来是非常快速!

前端开发者在网络上看到的很多案例都是采用Bootstrap搭建的案例,所以案例中总是可以看到bootstrap的样式文件和js扩展插件。

如果使用Bootstrap遇到和已有样式文件冲突导致页面混乱,有冲突怎么办?

例如:bootstrap-markdown编辑器的使用,引入相关文件,发现页面混乱。

在已有系统全局中引入Bootstrap样式文件发现页面样式混乱,擦!遇到麻烦了!很想使用Bootstrap的这个功能,怎么决绝这个混乱呢?

修改原站样式文件,class类名,id名称;这样真不一定行,要修改的太多,修改来修改去问题越多,系统越大越麻烦!(放弃)

解决Bootstrap v3.3.4样式冲突的办法

把Bootstrap css与与已有的样式类隔离,问题就解决了!

less是一个css处理器,它允许您在编译为css之前更改变量。这允许您更改一个变量(例如基本字体大小),而less将自动调整依赖它的所有样式(例如,行高、标题等)。这个简短的教程将向您展示如何使用less定制引导css,然后在所有引导样式前面加上bootstrap iso类。

1、使用方法,下载bootstrap-iso.css文件引入

将:<link rel="stylesheet" href="/css/bootstrap.min.css" />替换为:<link rel="stylesheet" href="/css/bootstrap-iso.css" />

2. 然后将HTML包装在带有类bootstrap-iso的div中,如下所示:

<div class="bootstrap-iso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

相关文章
文章评论

( 0 )