如何使用LayoutIt构建HTML Bootstrap布局！
这项最新的框架创新为Web开发人员带来了一种创建总体上更轻松，更快，响应更好的网站和应用程序的新方法。
p>如果您想建立一个响应式网站，那么Bootstrap将是您的便捷工具。
这可以帮助您轻松地基于Bootstrap设计HTML布局。
为了使此过程更轻松，更快捷，在本文中，我们将介绍LayoutIt！
但是，这非常困难，更不用说从头开始构建布局了。
到目前为止，它仍处于beta模式，但到目前为止，它运行良好，没有任何故障。
然后，可以使用内置的Bootstrap代码将该设计完整地用于您的项目中 。
支持最新的Bootstrap版本，如果您不想完全从头开始，则可以使用3种基本模板。
LayoutIt！
是一个基于Web的工具，用于通过拖放来布局网页设计。
入门
在顶部附近，您可以看到可以在以下三种模式下构建的模式：编辑模式，开发人员模式和预览模式。
正如您在以下屏幕截图中所看到的，有很多工具和选项可以签出。
您需要转到“ 编辑”页面 。
开始使用LayouIt！
构建完成后，只需下载代码， 共享或保存即可 。
容器是您的画布，可以在其上构建和自定义元素。
在顶部栏下方，您可以在左侧边栏上看到元素，而在右侧边看到“容器”。
元素
只需将所需的元素拖放到Container并相应地自定义即可。
元素有4种类型：网格系统，基本CSS，Javascript和其他组件。
网格基本上为您提供了行和列供您处理。
首先，选择一个或多个网格系统以创建要在网站上看到的布局。
您可以在每个元素中找到其他其他首选项，例如段落对齐，重点突出或使其成为引导。
拥有网格后，可以使用Base CSS添加一些基本CSS元素，例如标题，段落，blockquote，表格，按钮，图像等。
最后，要增强您的网站，只需添加一些Javascript元素即可：模式，导航栏，标签，警报，折叠或轮播。
为了添加通用属性， 组件为您提供了网站的几个基本元素，例如按钮，标题，文本，面包屑，分页等等。
使用指南
这是布局的细分。
在实际运作中，我们将尝试构建Hongkiat.com的首页布局。
看如何布局！
首先，我们需要进行网格布局。
以下屏幕快照是布局在骨架网格上的外观。
页脚四列，脚注一列。
侧栏的单列；
文本内容，图像和分页的两列；
布局需要四个主要行：标头和导航栏的单列；
现在添加其他元素：
- 我们从“组件”添加标题 ，从“ Javascript”添加导航栏 。
- 要将图像放在文本内容旁边，应在前8个网格内插入另一个8 4网格（请参见上图）。
- 从“组件”添加文本 ，并从“基本CSS”添加图像 。
- 在“ 文本和图像”下 ，从“组件”中插入分页
- 对于边栏，我们只需要使用“基础CSS”中的“ 标题 ”添加标签文本即可。
- 对于页脚，我们可以从“基础CSS”中选择“ 标题”和“ 段落 ”。
- 对于脚注，我们仅添加“ Base CSS”中的Paragraph 。
提示：要启用文本编辑，请右键单击文本。
这就是布局的样子。
我们完成了。
试一试，让我们知道您的想法。
是一个有趣的工具。
对于那些刚熟悉Bootstrap并想要构建Bootstrap支持的布局的用户，请LayoutIt！