如何简单快速的修改Bootstrap

谁践踏了优雅 2021-12-20 10:23 154阅读 0赞

日期：2013-7-22  来源：[GBin1.com][]

[![如何简单快速的修改Bootstrap][Bootstrap]][Bootstrap_Bootstrap]

[Bootstrap][Bootstrap 1]并不是单单意味着HTML/CSS界面框架，更确切的说，它改变了整个游戏规则。这个囊括了应有尽有的代码框架使得许多应用和网站的设计开发变得简便许多，而且它将大量的HTML框架普及成了产品。

可悲的是，它纯粹的功能唤起了我们本能的懒惰，很多人始终坚持使用它的默认设置。现在，你要知道，这些经过丰富想象力的默认样式和布局网格都不差，他们都是Twitter team花费了大量时间和精力的产物。他们是坚实的基础。

但是，Bootstrap的真谛是“基石”。Bootstrap框架，并不意味着它是全部终结解决方案。这个规则的一个例外可能是，如果你在内部开发了些东西，是公众看不到的。但是即使这样，你的想法会将人们带的更远，甚至改变一切。

Bootstrap的开发者们确实做了非常棒的工作，使得很多事情变得简单，他们的代码被模块化，你可以下载框架的独立组件。他们在网站上甚至提供了一款[基本自定义工具][Link 1]，允许你编辑变量。

其余的，则决定于我们。一些真正的设计者和开发者已经加紧创建工具和变更，我们没有理由落于人后。现在已经没有借口再去使用Bootstrap的默认设定了。

## Bootstrap 变更 ##

以下是一系列变更已经非常成熟了，可以将你基本的bootstrap变得不再是你熟识的那个样子。这些变更的使用可能有些限制，也有些是在特定条件下使用的，但是如果他们符合你的需求，他们会为你省下不少时间和金钱。

## Flat UI ##

第一种变更就是[Flat UI][]（扁平化设计界面），由[Designmodo][]发布。Flat UI迅速普及开来，在设计界有很好的理由：那就是它做的很漂亮。它是为那些偏爱扁平化设计的人存在的 - 与Bootstrap多少有些的拟物化设计正相反 - 每一个UI元素都被依据崭新的美学重新设计了。

矢 量图标，一个新的字形图标字体，自定义的UI元素（类似于to-do list）和多种改变起来非常容易的颜色主题，Flat UI让我，可能许多人也一样，重新设想Bootstrap可以如何展现。我经常觉得，基本的段落元素中的文本大小对于网站而言有些小，说句公道话，我觉得 他们只适合于应用程序的界面，在应用程序的界面里，你可以将文本放在狭小的空间里。

Flat UI是免费的，但是你可以使用付费的专业版本，专业版本中有附加元素，功能和PSD文件。

![如何简单快速的修改Bootstrap][Bootstrap 2]

## Fbootstrapp ##

记得我之前说过有些变更是有特定使用条件的？我当然不是玩笑的。[Fbootstrapp][]已经完全重新开发用于兼容Facebook的用户界面元素。

为 什么要这么做呢？用他们自己的话说就是“Fbootstrapp是一套发起了Facebook iFrame应用开发的工具包。它包括了基本的排版，表格，按钮，表单，网格，导航和更多元素的CSS和HTML样式，让他们看起来和体验起来都和典型的 Facebook一样”。

Facebook的开发者们，注意，你们的工作开始变得简单了。

![如何简单快速的修改Bootstrap][Bootstrap 3]

## Jumpstart UI 管理模板 ##

Bootstrap主要是用于应用，如果你想要将它在经典的“管理员界面”上应用，你还需要额外的工作。[Jumpstart UI][]为你带来三种不同的模板，让你不再费力。

管理员UI图标，小部件的样式，基于jQuery的数据可视化插件还有更多其他的，被引入了干净的，可自定制的，全响应布局中。

这种变更不同于其他的最大一点是，它没有任何免费的版本，而必须付费才能使用。它只需要15到20美元，与它可以实现的功能，以及它符合你的特殊需求这两点而言，这个价格非常的划算。

![如何简单快速的修改Bootstrap][Bootstrap 4]

## BootMetro ##

有些人喜欢它，但更多人厌恶它，但是不可否认的是Windows 8和其Metro UI在设计界引起了轰动。我并不认为这种UI有特别的用处（一些软件商店除外），不过我们有一个[BootMetro][]！

它是免费的，而且看起来特性完善，所以放心使用吧。对于大多数人而言，他可能不是特别有用，但是他是一种新奇的代码体验。

![如何简单快速的修改Bootstrap][Bootstrap 5]

## Bootstrap客制化工具 ##

所以你想引导你的Bootstrap更好的达到你的UI需求，你要如何开始？你当然可以直接看代码，我可以告诉你，这样做是非常困难的。

如果你想手动改变所有的排版，或者是按钮，链接颜色，又或者是导航样式，你可以在Bootstrap网站上的客制化应用中编辑所有的变量，但是你必须知道所 有颜色的HEX代码，而且当你做改变的时候，你看不到任何的可视性返回，也就是说你在修改的时候，完全不可预见你编辑后的样子是什么样的。

但是幸运的是，现在有很少一部分Bootstrap主题创作者为了这种客制化需求，特别做出了一些工具。以下是我至今认为最好的两种。

## StyleBootstrap ##

如果你忽略笨拙的界面，StyleBootStrap是款很强大的工具，用于编辑你可以在框架总见到的大多数默认UI元素。

![如何简单快速的修改Bootstrap][Bootstrap 6]

## Bootstrap Magic ##

Bootstrap Magic是一款帮助你重塑架构的工具。它的界面简单友好，比StyleBootstrap可以微调更多的元素。因此，它需要更多的时间，但是它比起手动修改所有元素还是节省了不少时间。

![如何简单快速的修改Bootstrap][Bootstrap 7]

## 插件  & 片段 ##

有些东西是Bootstrap没有的，但是对我们而言却是非常重要的。首先是图标。

## Font Awesome ##

Bootstrap提供的图像字符图标非常酷，但是却很有限。你有一个“黑暗”图标，还会有一个“光亮”图标，这些都是一个可爱的小精灵图像。但是图标字体，应该更为灵活。 任何你可以用CSS3做的编辑，在这些图标上也都应该可以实现。比如改变颜色，给他们加上一个阴影，像写CSS一样简单。[Font Awesome][]可以现在可以为361个图标进行这样的修改。

![如何简单快速的修改Bootstrap][Bootstrap 8]

## Bootsnipp ##

[Bootsnipp][]是一个HTML片段库，与Bootstrap结合使用，并且不需要添加其他库。片段包括：注册和登陆表单，日历，类似Gmail的e-mail界面，media player界面，甚至更多。

![如何简单快速的修改Bootstrap][Bootstrap 9]

## 这并不是全部 ##

Twitter宠爱的模板越来越被广泛适应，也许在自定义Bootstrap上有更多的方法，更多的信息，是我的列表乃至任何列表中都没有的。毕竟，互联网就是为此而存在的，对吧？

via [Nelly@极客社区][Nelly]

### 来源：[如何简单快速的修改Bootstrap][GBin1.com] ###

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/
[Bootstrap]: http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/title.jpg
[Bootstrap_Bootstrap]: http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/index.html
[Bootstrap 1]: http://twitter.github.io/bootstrap/
[Link 1]: http://twitter.github.io/bootstrap/customize.html
[Flat UI]: http://www.gbtags.com/gb/designmodo.github.io/Flat-UI/
[Designmodo]: http://designmodo.com/
[Bootstrap 2]: http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/1.jpg
[Fbootstrapp]: http://ckrack.github.io/fbootstrapp/
[Bootstrap 3]: http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/2.jpg
[Jumpstart UI]: http://www.gbtags.com/gb/jumpstartui.com
[Bootstrap 4]: http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/3.jpg
[BootMetro]: http://aozora.github.io/bootmetro/
[Bootstrap 5]: http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/4.jpg
[Bootstrap 6]: http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/5.jpg
[Bootstrap 7]: http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/6.jpg
[Font Awesome]: http://www.gbtags.com/gb/fortawesome.github.io/Font-Awesome/
[Bootstrap 8]: http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/7.jpg
[Bootsnipp]: http://www.gbtags.com/gb/editpost.htm?postid=1531#bootsnipp.com/
[Bootstrap 9]: http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/8.jpg
[Nelly]: http://www.gbtags.com/gb/share/1531.htm