Html 5或bootstrap用于响应式布局

Question

我是UX / UI的新手。我看到html5也表示响应式设计和Bootstrap也有相同的说法。那么我将使用哪个布局。什么对另一个有益。我想让我的基础知识正确。

Answer 1

HTML5和Bootstrap是完全不同的实体，只有当您一起使用它们才能获得响应式网站时。 Bootstrap是一个CSS框架，允许您使用预定义的CSS类和一些JavaScript构建响应式站点。

Answer 2

Html5没有响应但是bootstrap是。响应不是HTML的东西，而是CSS的东西。通常，您希望用户能够从不同的设备上查看您的应用程序而不会出现任何问题（例如混乱），对于该用户，我们已经响应和适应性（两者都是这与CSS有关。）

假设你有一个div标签，你给它宽度和高度属性，比如500x500。在大型桌面屏幕中，它看起来似乎是正常尺寸，但在手机上它可能占用整个屏幕甚至更多。因此，如果您将其大小设置为width: 10%;和height: 10%;等百分比，那么它将是一个类似响应的解决方案。

然后它是一个响应式框架的bootstrap，其grid layout system允许您使用class="col-<device>-<columns>"为不同设备中的相同HTML标记提供不同的部分（当然，您可以使用多于1个）同一HTML标记的类）。 Bootstrap有4个设备：

• xs：mobiles
• sm：tablets
• md：desktops
• lg：电视

每行还有12个列（它不会手动处理高度，高度会根据需要增加，除非您在css中手动定义它）。所以，我们之前的例子可能会像：

<div class="row">
  <div class="col-xs-10 col-sm-8 col-md-9 col-lg-5"></div>
</div>

Here你有一个codepen示例。 （尝试调整其宽度）

对于不同的设备，它需要不同的尺寸。所以在这一点上你可以注意到两件事情，这里还有更多的事情（超出行程/响应性），我仍然没有提到什么是适应性的。好的，适应性只是有条件地使用一些CSS规则用于不同的屏幕尺寸（而不是作为门户）by using media queries适应性布局的一个例子是Youtube，响应式布局的例子是Twitter。

此外，bootstrap还为您提供了一些js functionality，一些默认css components（例如navigator，tables等等）以及一组{ {3}}

Answer 3

这取决于你想要什么。 如果你想要一切都写自己，那么简单的HTML5。另一方面，它有一个Bootstrap-CSS框架，它可以处理大多数无聊的东西并使用HTML5。

Answer 4

基本上，您可以将Bootstrap与HTML5一起使用。如果你想在保持网站轻量化的同时自己做所有事情，那么你可以做普通的HTML5-CSS。但是，Bootstrap几乎可以处理所有的UI响应，但却以重量为代价。

最后，如果你想创造一个轻量级和自编写的设计（这会更难）或增加更多的重量，你可以使用它，因为你拥有大量的功能可以基本上轻松应用。

Answer 5

功能上，答案是Bootstrap更完整，它有更多按钮，菜单，幻灯片等，您可以快速拿起和使用。缺点是结果看起来像Bootstrap网站（就像你通常可以告诉WordPress网站一样）。

HTML5（我认为你的意思是HTML5 Boilerplate，否则你将苹果与橙子进行比较），更基本，你需要更多地编辑HTML和CSS。另一方面，因为它更基础，你可以更灵活地使用它。