建站教程：利用Bootstrap进行快速Web开发

图 2. 清单 2 中的浏览器输出

特定于站点的 CSS

图 2 中所示页面的主要元素的布置是正确的。但是页面缺少让其更吸引眼球的样式元素，所以我将添加一些 CSS（样例代码 中的 main.css）来实现这一目标。Bootstrap CSS 本身是使用 LESS 编写的，但我通常高度推荐使用 LESS 而不是纯文本的 CSS。但在这个简单示例中，清单 3 中的纯文本的 CSS 就足够用了：

清单 3. 向示例 HTML (main.css) 中添加基本设计的 CSS

.widget-content {
  margin: 10px;
  padding: 1px;
  background-color: #DDDDDD;
}    
 
.widget-title {
  font-weight: bold;
  padding: 10px;
  background-color: #EEEEEE;
}    
 
.widget-text {
  padding: 10px;
  background-color: #FCFCFC;
}    
 
#footer {
  text-align: center;
  font-size: small;
}

当然，清单 2 中的 HTML 现在需要 清单 3 中的特定于站点的 CSS 的一个附加链接。在 样例代码 中，包含 main.css 链接的已更新的 HTML 位于 main.html 文件中。图 3 显示了结果页面，其中的 main.css 更为美观：

图 3. 来自 main.html 的浏览器输出

结束语

对于我和其他许多人来说，我们的优势是代码和数据，而不是视觉和其他感官设计，所以 Bootstrap 就是一个极其宝贵的工具。我可以关注一个 Web 项目的基本代码和数据，并将其绘成初始形状，然后与设计人员合作来美化页面。Bootstrap 对一些特别微妙的领域很有帮助，比如移动设备设计和其他小屏幕设置。它还附带了一个库，其中包含按钮、导航样式和其他可重用工具。最重要的是，Bootstrap 包含的大量代码可减少 Web 浏览器和平台之间的许多令人烦恼的变化。

如此多的项目都在使用 Bootstrap，以至于许多人现在可以立即识别出基于的 Bootstrap 的站点。这种识别有时候可以创建一种非独创性的效果。一名优秀的设计人员不仅可以给使用 Bootstrap 生成的站点提供自己的不同字符，而且还可以确保该站点的基本元素和响应元素都专用于其内容和使用。但是，只有少数几个项目开始研究这些考虑因素。Bootstrap 尤其适用于将思想的闪光点快速转变为 Web 项目。

延伸阅读：

• 盘点20款免费的Bootstrap后台和前端模板
• Bootstrap3和Foundation5的网格系统比较
• 20分钟建立自己的Bootstrap站点

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!