Kaa*_*ral 16 javascript css twitter-bootstrap
有没有一种简单的方法在现有项目中使用Bootstrap?
目前,它为表格等添加了样式,这会破坏页面中的所有内容.
我真的很喜欢模态窗口,一些按钮,但我不想一直打猎bootstrap css将项目切换回默认样式.
在Bootstrap 3和Less 1.4.0出现后,bootstrap已经开始使用:extend()伪选择器.这意味着某些事情会在我发布的原始代码中失败(你会得到一些.bscnt .bscnt form-horizontal代码,这意味着你必须在彼此内嵌两个div,这只是愚蠢的).解决这个问题的简单方法是从bootstrap.less(@import variables.less和@import mixins.less)中删除前两行,而不是在.bs-cnt范围之外导入这些文件:
@import "variables.less";
@import "mixins.less";
.bscnt {
@import "bootstrap.less";
}
Run Code Online (Sandbox Code Playgroud)
您也可以从这里下载bootstrap:Bootstrap source然后进入"less"目录并添加一个名为"bootstrap-custom.less"的文件,您将在其中输入以下内容:
.bs-cnt {
@import "bootstrap.less";
}
Run Code Online (Sandbox Code Playgroud)
Bootstrap-CoNTainer的"bs-cnt".如果你愿意,你可以把它做得更长,但要记住它会被粘贴在已编译的CSS中的很多地方,所以它是为了节省最终文件中的空间.
完成此操作后,使用您最喜欢的编译器编译bootstrap-custom.less文件(如果您使用的是SimpLESS非常好),那么您将拥有一个仅在放置时才能运行的编译引导程序文件一个类为"bs-cnt"的容器元素.
<div class="bs-cnt">
<button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
</div>
<button class="btn btn-danger">This however; Won't</button>
Run Code Online (Sandbox Code Playgroud)
您可以使用bootstrap网站上的"自定义"功能来获取您想要的功能:Twitter Bootstrap下载页面.大多数bootstrap规则都是明确的.您可能只想省略默认情况下隐式的重置规则.
| 归档时间: |
|
| 查看次数: |
8664 次 |
| 最近记录: |