Twitter Bootstrap定制最佳实践

作者: 岁爵
发布时间: 2024-07-04 12:53:10 (1月前)
转自：

8 条回复

0#
回复此人
滔滔江水 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果（并且只有IF）您有时间可以像我一样做。我保留了我自己的框架修改版本，随着框架的每次更新，我都会阅读文档并检查源代码进行修改。 </p> <P> 这个解决方案在初看起来可能听起来不太理想，但我有理由这样做。我不使用其中一个，而是使用许多框架，最佳实践，重置/规范化样式表等等。我总是确信没有任何更新会以任何我看不到的方式改变现有项目。 </p> <P> 由于以下原因，我正在使用自己的自定义框架。 </p> <OL> <LI> 我删除了每一点我不需要保持模块化和小的东西 </LI> <LI> 我使用我的框架进行客户工作，并希望a）知道我正在使用什么，同时b）拥有我卖给客户的所有东西。我不是简单地复制和使用框架，而是尝试理解并重新创建它们 </LI> <LI> 我将我的框架与CMS结合使用，不能简单地将框架放入项目/从头开始 </LI> </醇> </DIV>

编辑
1#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我找到了和乔尔一样的解决方案： </p> <P> 的<strong> 自定义较少文件 </强> </p> <P> 就像上面描述的那样：我为我自定义的所有Less文件创建本地副本：例如：“variables-custom.less”，“alerts-custom.less”，“buttons-custom.less”。所以我可以使用一些标准，并有我自己的补充。缺点是：当Bootstrap更新时，它很难迁移。 </p> <P> 但还有别的东西： </p> <P> 的<strong> 覆盖样式 </强> </p> <P> 在寻找工作流程时，我经常会看到人们建议简单地覆盖样式。因此，首先导入标准的Less文件，然后在底部添加自定义声明。这里的好处是：更新到更新版本更容易。缺点是：编译的CSS文件包含所有覆盖。一些CSS选择器定义了两次。因此浏览器需要进行一些提升以找出实际应用的内容。那不是很干净。 </p> <P> 我想知道为什么预处理器不够聪明来解决这样的双重声明？我在这里缺少更好的工作流程吗？ </p> </DIV>

编辑
2#
回复此人
离线请留言 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 一个更好的（恕我直言）方法是采取提示 <a href="http://bootswatch.com/" rel="noreferrer"> Bootswatch </A> github项目叫 <a href="https://github.com/thomaspark/bootswatch/tree/gh-pages/swatchmaker" rel="noreferrer"> swatchmaker </A> 。该项目专门用于构建和管理网站上的数十个Bootstrap主题。 </p> <P> 该 <a href="https://github.com/thomaspark/bootswatch/blob/gh-pages/swatchmaker/Makefile" rel="noreferrer"> <code> Makefile </code> </A> 在项目构建中 <code> swatchmaker.less </code> （你可以将它重命名为类似的东西 <code> customizations.less </code> ）。此文件包含一堆导入： </p> <pre> <code> @import "bootstrap/less/bootstrap.less"; @import "swatch/variables.less"; @import "swatch/bootswatch.less"; @import "bootstrap/less/utilities.less"; </code> </pre> <P> 你可以重命名 <code> swatch </code> 文件夹和 <code> bootswatch.less </code> 文件到你认为合适的任何东西。 </p> <P> 这是有道理的，因为您可以在不影响自己的文件的情况下升级Bootstrap。事实上， <code> Makefile </code> 还包含获取最新版Bootstrap的命令。有关更多信息，请参阅项目页面上的README。 </p> <P> 作为奖励，README还建议您安装 <code> watchr </code> 宝石会在a时自动构建项目 <code> .less </code> 文件更改。 </p> </DIV>

编辑
3#
回复此人
⑩Ⅵ嵗Ｄ夨憶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这也是我一直在努力的事情。一方面，我想用我自己的颜色和设置高度自定义variables.less文件。另一方面，我想尽可能地更改Bootstrap文件以简化升级过程。 </p> <P> 我的解决方案（目前）是创建一个addon LESS文件并将其插入到 <code> bootstrap.less </code> 导入变量和mixin后的文件。所以像这样： </p> <pre> <code> ... // CSS Reset @import "reset.less"; // Core variables and mixins @import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "mixins.less"; // Custom Addons @import "addon-file.less"; // <--- My custom LESS addon // Grid system and page structure @import "scaffolding.less"; ... </code> </pre> <P> 这样，如果我想重置Bootstrap颜色，字体或添加额外的mixin我可以。我的代码是独立的，但将在其余的Bootstrap导入中编译。它并不完美，但它是一个对我有用的权宜之计。 </p> </DIV>

编辑
4#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只需添加 <code> @import "../../styles.less"; </code> （或者你的样式表在哪里）bootstrap.less在底部。这允许你使用像Bootstrap mixins <code> .gradient </code> 要么 <code> .border-radius </code> 在你自己的style.less里面。 </p> </DIV>

编辑
5#
回复此人
不见你 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在我身边，我只有一个名为的文件 <code> theme.less </code> 进口的 <code> boostrap.less </code> 在它中，我刚刚覆盖（即使使用LESS似乎很糟糕，但更好，维护更容易）变量值我不想更新。 </p> <P> 这适用于具有变量的自定义值 <code> variables.less </code> </p> <P> 之后我编译我的 <code> theme.less </code> 而是关闭文件 <code> bootstrap.less </code> </p> <P> 的<strong> 例 <code> theme.less </code> ： </强> </p> <pre> <code> @import "path/to/my/bootstrap.less"; @linkColor: #MyAwesomeColor; </code> </pre> </DIV>

编辑
6#
回复此人
一生浮华 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我的解决方案类似于jstam，但我尽可能避免对源文件进行更改。鉴于对bootstrap的更改将经常发生，我希望能够通过将我的修改保存在单独的文件中来下载最新的源并进行最小的更改。当然，它并不完全是防弹。 </p> <OL> <LI> <P> 将bootstrap.less和variables.less复制到父目录。将bootstrap.less重命名为theme.less或任何你想要的。您的目录目录结构应如下所示： </p> <pre> <code> /Website theme.less variables.less /Bootstrap ... </code> </pre> </LI> <LI> <P> 更新theme.less中的所有引用以指向引导子目录。确保您的variables.less是从父级而不是引导程序目录引用的，如下所示： </p> <pre> <code> ... // 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"; </code> </pre> <P> ... </p> </LI> <LI> <P> 在包含它们之后立即在theme.less文件中添加CSS覆盖。 </p> <pre> <code> ... // 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; } ... </code> </pre> </LI> <LI> <P> 链接到theme.less而不是HTML页面中的bootstrap.less。 </p> </LI> </醇> <P> 每当新版本发布时，您的更改应该是安全的。每当新版本发布时，您还应该在自定义引导程序文件之间进行区分。变量和进口可能会发生变化。 </p> </DIV>

编辑

登录后才能参与评论