twitter-bootstrap – Twitter Bootstrap自定义最佳实践

发布时间：2020-12-17 23:00:42 所属栏目：安全来源：网络整理

导读：我使用Bootstrap 2.0.3使用LESS。我想要广泛地定制它，但我想避免对源代码进行更改，尽可能的对库的更改频繁。我是LESS的新手，所以我不知道它的编译是如何工作的。使用LESS或LESS基础框架的一些最佳实践是什么？解决方法我的解决方案是类似的jstam的，但

我使用Bootstrap 2.0.3使用LESS。我想要广泛地定制它，但我想避免对源代码进行更改，尽可能的对库的更改频繁。我是LESS的新手，所以我不知道它的编译是如何工作的。使用LESS或LESS基础框架的一些最佳实践是什么？

解决方法

我的解决方案是类似的jstam的，但我避免了更改源文件，如果可能的话。考虑到引导的更改将频繁，我想能够拉下最新的源，并通过保持我的修改在单独的文件中进行最小的更改。当然，它不是完全防弹。

>将bootstrap.less和variables.less复制到父目录。将bootstrap.less重命名为theme.less或任何你想要的。您的目录目录结构应如下所示：

/Website            
     theme.less
     variables.less
     /Bootstrap
     ...

>更新theme.less中的所有引用以指向bootstrap子目录。确保您的variables.less是从父而不是引导目录引用的，如：

...
// CSS Reset
@import "bootstrap/reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors,font-sizes,etc
@import "bootstrap/mixins.less";

// Grid system and page structure
@import "bootstrap/scaffolding.less";
@import "bootstrap/grid.less";
@import "bootstrap/layouts.less";

… …
>在theme.less文件中立即添加您的CSS覆盖，包括它们。

...
// Components: Nav
@import "bootstrap/navs.less";
@import "bootstrap/navbar.less";

// overrides
.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner {
    border-radius: 0 0 0 0;
    padding: 10px;
}

.nav-tabs,.nav-pills {
    text-transform: uppercase;
}

.navbar .nav > li > a {
    text-shadow: none;
}

...

>在HTML页面中链接到theme.less而不是bootstrap.less。

每当新版本出来，您的更改应该是安全的。你还应该在你的自定义引导文件之间做一个差异每当一个新的版本出来。变量和导入可能会更改。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!