如何使用Twitter引导创建一个响应性网站设计

“欢迎来到响应性网络!”在过去的一年中，这一术语到处都是，以至于我的很多客户都在要求一个响应式的设计。对我来说，这真的很有趣，因为他们从来没有要求过手机或平板电脑的版本。

有人会说，手机并不是主流，每个人都试图模仿网络上的IOS界面，我同意，这很糟糕，但这不是客户要求响应的唯一原因!不知怎么的，他们认为我们会按我们的要求进行响应式设计，这是正常的，所以价格应该保持不变。嗯，没那么容易。

如何使用Twitter引导创建一个响应性网站设计?

如何使用Twitter引导创建一个响应性网站设计?
响应式web设计是一种方法，我经常称之为“心态”，因为你必须改变你的思维方式。它背后的基本理念是:一个设计来管理它们——没有m.domain.com，没有touch.domain.com，没有3个单独的CSS文件，每个设备或每个方向都没有7个PSD文件——只是“domain.com”在桌面、平板和手机上看起来是一样的。

响应式设计的理念依赖于针对特定屏幕分辨率和大小的CSS3媒体查询。现在媒体查询已经有一段时间了，但我们主要是用它们来实现打印样式。随着CSS3的发展，它们变得非常有用。

有趣的事实:今天你甚至可以为那些重量为3KG的设备写一个媒体查询。疯狂的,对吗?

有两件事是肯定的，如果你开始创建响应式设计:

更多的工作——更多的是CSS代码，经常是一些JS，但也有很多关于UI本身的思考和计划，它是如何扩展的，用户如何与它交互等等。
大量的测试——这是最大的缺点。测试响应性设计的唯一真正的方法就是在设备上使用它，你可以想象写5行CSS然后抓取iPad，加载网页，旋转它的风景，糟糕的是，在风景中它看起来不那么热，所以回到代码…你懂的。
这里有一个很好的部分，有一种近乎神奇的方式开始创建响应性设计，它的名字是Twitter引导。

Twitter引导-你的新BFF。
Twitter引导

推特是由Twitter上的两个家伙创建的，他们想要加速并引导他们的工作量和代码。如果你访问Twitter Bootstrap的主页，他们将其定义为:“光滑、直观、强大的前端框架，以更快更轻松地开发web”，而他们并没有对你撒谎!

我通常不会在框架上大做文章，并且喜欢尽可能多地编写代码，因为各种原因，所以请相信我，当我说它值得每一分钟的时候，你会花很多时间去学习它，这不会太久。

Twitter提供了很多神奇的东西:

全球风格的身体重置类型和背景，链接风格，网格系统，和两个简单的布局。
用于常见HTML元素的样式，如排版、代码、表格、表单和按钮，以及一个很棒的小图标集。
通用接口组件的基本样式，如标签和药片，导航条，警报，页眉，等等。
Javascript插件，比如工具提示、弹出窗口、modals等等。
但最重要的是，它非常容易学习和使用，而且它有非常好的文档和开发人员梦寐以求的所有例子。让我们深入研究一下。

开始使用引导

您要做的第一件事是访问Bootstrap下载页面(这可能是一个标记URL的好时机)。你可以在那里找到所有的文档，包括一些基本的指南和教程，所以我不会浪费时间解释这些。

这很重要，你可以从他们的主页下载这个框架，或者你可以下载一个定制的版本，我更喜欢这个版本，因为你可以选择和选择你需要或想要的东西。这个版本最棒的地方是它只有一个CSS文件的响应媒体查询你需要与其他版本有一个正常的CSS文件和一个单独的CSS文件中对媒体查询和一群JS文件就是混乱的。

定制引导

因此，如果您跳到定制引导页面，您将看到您可以关闭/在诸如JS插件、CSS样式、UI组件、响应查询、定义字体、颜色等方面。对于本文，您可以只保留默认的所有内容，并单击big“下载定制版本”按钮。

下载并解压缩包后，您将得到以下内容:

-引导/
——css /
——引导。css(可以删除)
推荐- - - - - - bootstrap.min.css
——js /
——引导。js(可以删除)
推荐- - - - - - bootstrap.min.js
——img /
推荐- - - - - - glyphicons-halflings.png
推荐- - - - - - glyphicons-halflings-white.png
首先要做的是删除CSS & JS文件的非缩小版本(bootstrap)。css, bootstrap.js)因为我认为你不需要。 本文来源：杰云网络，转载请注明出处！如果需要 营销型网站建设、 微商城、 小程序商城、 多端小程序 请联系我们！