自定义Bootstrap CSS模板
Ann*_*nne 105 css twitter-bootstrap bootswatch
我刚从Twitter开始使用Bootstrap,我想知道什么是"最佳实践"用于定制.我想开发一个系统,该系统将利用一个CSS模板的所有电源(引导或其他),彻底(容易地)修改的,是可持续的(即 - 当引导的下一个版本是从Twitter的我不要公布"我必须重新开始.
例如,我想在顶部导航中添加背景图像.看起来有三种方法可以解决这个问题:
- 修改bootstrap.css中的.topbar类.我不是特别喜欢这个,因为我会有很多.topbar项目,我不一定要以同样的方式修改它们.
- 使用我的背景图像创建新类并应用这两种样式(new和bootstrap到我的元素).这可能会产生样式冲突,可以通过将.topbar类剥离到单独的类中然后仅使用我的自定义类未处理的部分来避免这种冲突.同样,这需要比我认为必要的更多工作,虽然它很灵活,但是当Twitter发布下一部分时,它不允许我轻松更新bootstrap.css.
- 使用.LESS中的变量来实现自定义.这似乎是一个很好的方法,但没有使用过.很少我担心在客户端编译css和代码可持续性.
虽然我使用的是Bootstrap,但这个问题可以推广到任何css模板.
提前感谢您的意见.
Pab*_*uez 126
最好的办法是.
1.从github分叉twitter-bootstrap并在本地克隆.
他们正在快速改变库/框架(他们内部分歧.有些人更喜欢库,我会说这是一个框架,因为从你在页面上加载它时改变你的布局).好吧...分叉/克隆将让您轻松获取即将推出的新版本.
2.不要修改bootstrap.css文件
当你需要升级bootstrap时,它会让你的生活变得复杂(你需要这样做).
3.创建自己的css文件,并在需要原始引导程序时覆盖
如果他们设置了一个顶部栏,让我们说,color: black;但是你想要白色,为这个顶部栏创建一个新的非常特定的选择器,并在特定的顶部栏上使用此规则.例如,对于一个表,它就是<table class="zebra-striped mycustomclass">.如果您之后声明了css文件bootstrap.css,这将覆盖您想要的任何内容.
- +1好答案.只是添加到他的第3点:除了旧类之外,您可以创建要应用的新类,或者只是覆盖/添加要更改的属性. (15认同)
- 您是否可以添加一些关于如何以“新”less/sass 方式执行此操作的内容？即：如何子类化“引导”样式？继承全部+增强。我还没有弄清楚这是一个混合、扩展还是一个？对不起，我很愚蠢。 (2认同)
- 如果您只是要为自己的CSS文件添加更改,那么分支Bootstrap的重点是什么？ (2认同)
Zim*_*Zim 21
更新2018 - Bootstrap 4
我正在重新审视4.x的Bootstrap定制问题,它现在使用SASS而不是LESS.一般来说,有2种方法可以自定义Bootstrap ...
1.简单的CSS覆盖
一种自定义方法是简单地使用CSS来覆盖Bootstrap CSS.为了可维护性,CSS自定义放在一个单独的custom.css文件中,以便bootstrap.css保持不变.该参考custom.css如下之后的bootstrap.css为覆盖工作...
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
只需在自定义CSS中添加所需的任何更改即可.例如...
/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control {
border-radius: 0;
}
之前(bootstrap.css)
之后(带custom.css)
进行自定义时,您应该了解CSS特性.覆盖custom.css需要使用特定的选择器bootstrap.css.
请注意
!important,除非您覆盖其中一个Bootstrap Utility类,否则无需在自定义CSS中使用.CSS特性 总是适用于一个CSS类来覆盖另一个.
2.使用SASS进行自定义
如果您熟悉SASS(并且您应该使用此方法),则可以使用自己的方法自定义Bootstrap custom.scss.Bootstrap文档中有一节解释了这一点,但是文档没有解释如何利用您的现有变量custom.scss.例如,让我们将body background-color 更改为#eeeeee,并将蓝色上下文颜色更改/覆盖primary为Bootstrap的$purple变量 ...
/* custom.scss */
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
/* -------begin customization-------- */
/* simply assign the value */
$body-bg: #eeeeee;
/* use a variable to override primary */
$theme-colors: (
primary: $purple
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
这也适用于创建新的自定义类.例如,在这里我想补充purple到创建主题颜色全部为CSS btn-purple,text-purple,bg-purple,alert-purple,等...
/* add a new purple custom color */
$theme-colors: (
purple: $purple
);
https://www.codeply.com/go/7XonykXFvP
使用SASS,您必须在自定义后使用@import引导程序才能使它们正常工作!一旦将SASS编译为CSS(这必须使用SASS编译器node-sass,gulp-sass,npm webpack等完成),生成的CSS就是自定义的Bootstrap.如果您不熟悉SASS,可以使用我创建的此主题构建器之类的工具自定义Bootstrap .
注意:与3.x不同,Bootstrap 4.x不提供官方定制工具.但是,您可以只下载网格 CSS或使用其他4.x自定义构建工具根据需要重新构建Bootstrap 4 CSS.
相关:
如何使用SASS扩展/修改(自定义)Bootstrap 4
如何更改引导原色？
如何使用sass 如何自定义Bootstrap 在Bootstrap 4中创建新的颜色样式集
Sym*_*ric 20
我认为官方首选的方法是使用Less,并动态覆盖bootstrap.css(使用less.js),或重新编译bootstrap.css(使用Node或Less编译器).
从Bootstrap文档,这里是如何动态覆盖bootstrap.css样式:
下载最新的Less.js并在其中包含它的路径(和Bootstrap)
<head>.Run Code Online (Sandbox Code Playgroud)<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>要重新编译.less文件,只需保存它们并重新加载页面即可.Less.js编译它们并将它们存储在本地存储中.
或者,如果您希望使用自定义样式(对于生产环境)静态编译新的bootstrap.css:
通过Node安装LESS命令行工具并运行以下命令:
Run Code Online (Sandbox Code Playgroud)$ lessc ./less/bootstrap.less > bootstrap.css
mda*_*shx 10
自从Pabluez在12月回复以来,现在有一种更好的自定义Bootstrap的方法.
使用:Bootswatch生成你的bootstrap.css
Bootswatch从最新版本(无论你在bootstrap目录中安装)构建普通的Twitter Bootstrap,还可以导入自定义.这样可以轻松使用最新版本的Bootstrap,同时保持自定义CSS,而无需更改HTML的任何内容.你可以简单地摇摆boostrap.css文件.
您可以使用自举模板
其中包括所有bootstrap .less文件.然后,您可以根据需要更改变量/更新较少的文件,它将自动编译css.部署时将较少的文件编译为css.
| 归档时间： |
|
| 查看次数： |
98315 次 |
| 最近记录： |