bootstrap评估_快速评估Twitter Bootstrap

bootstrap评估

我必须承认我很擅长图形设计。 这是首先让我选择Flex和Vaadin的原因之一：开箱即用，您得到了令人赏心悦目的应用程序。

在所有情况下都不可能（也不相关）使用这些技术中的一种，并且由于我对UI有浓厚的兴趣，因此我定期查看其他外观干净的应用程序的替代方案。 我本周研究的技术是Twitter Bootstrap 。

Bootstrap是一个轻量级的客户端框架，与其他组件一起提供了预样式化的“组件”和标准布局。 两者都是完全可配置的，您可以在此处下载自定义结果。 从技术的角度来看，Bootstrap提供了一个CSS-以及一个依赖jQuery的可选JavaScript文件（两者也都提供最小化版本）。 我不太喜欢高级客户端JavaScript，因此接下来的内容将重点介绍使用普通CSS可以做什么。

布局

Boostrap提供了一个940px宽的画布，分为12列。 这些列的处理方式取决于您自己：大多数时候，您可能希望将其中一些分组。 使用简单CSS类很容易实现。 实际上，在Bootstrap中，所有操作都由选择器完成。 例如，以下代码片段提供了一个主列，其宽度是其左侧和右侧边栏的两倍：

<div>
    <div> Left sidebar </div>
    <div> Main </div>
    <div> Right sidebar </div>
</div>

值得一提的功能是响应式设计：从本质上讲，布局可根据屏幕进行调整，这是考虑到当今用户代理分散的重要优势。

组件

无论您正在开发什么应用程序，都极有可能需要一些组件，例如按钮，菜单，字段（以表单形式），选项卡等。

通过CSS类，Bootstrap提供了许多组件。 对于现有HTML组件，它在它们上应用了视觉上吸引人的样式。 对于不存在的组件（例如菜单和选项卡），它将调整标准HTML的呈现。

结论

我试图用Bootstrap重新制作More Vaadin的某些页面，总的来说，结果并没有令人不悦。 在我不能使用Vaadin的情况下，我认为从头开始创建应用程序时我会是Bootstrap的坚定支持者。

您可以在这里找到我尝试的来源。

翻译自: https://blog.frankel.ch/quick-evaluation-of-twitter-bootstrap/

bootstrap评估