使用Bootstrap如何构建Web Page

小编给大家分享一下使用Bootstrap如何构建Web Page，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

Bootstrap是著名的社交网站、微博的先驱Twitter在2011年8月推出的开源WEB前端框架，集合CSS和HTML，使用了最新的浏览器技术，为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导航、提示等等。使用Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小。

Bootstrap是由Twitter的Mark Otto和Jacob Thornton开发的。

Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

早期Twitter的前端工程师几乎采用了任何自己熟悉的库来应对前端的开发需求，这样的造成的问题就是维护和扩展非常困难。最终Bootstrap成为应对这些挑战的解决方案，并开始在Twitter内部迅速成长，被twitter.com广泛采用，形成了稳定版本。随着工程师对其不断的开发和完善，Bootstrap进步显著，不仅包括基本样式，而且有了更为优雅和持久的前端设计模式。

使用Bootstrap构建优雅的Web Page

Bootstrap的核心就是基于Less框架构建的CSS。所以谈到Bootstrap，就必须得说说Less。

关于Less

Less是一个动态CSS语言框架，Less扩展了CSS的动态特性，相对于传统的CSS，Less提供了更为强大的功能和灵活性。基于Less，我们可以在编写CSS时使用嵌入式申明、变量、混合模式、运算和颜色编辑功能函数等。简单来说就是Less可以让你像编程一样编写CSS，把程序存储在后缀为less的文件中，Less提供了框架将其编译为标准的css文件。

举个简单的例子，如果你想为多个样式设置同一个颜色，可以这样写：

@color: #FFFFFF;
h2 {
color: @color;
} 
#sub{
color: @color;
}    
#编译后
h2 {
  color: #ffffff;
}
#sub {
  color: #ffffff;
}

以上代码只是Less的最简应用。除了变量，还可以在CSS进行数学运算、传参、文件相互引用、规则嵌套等等。可以想象，这种编写CSS的方式会为前端开发带来多大的改变。无论是从灵活性、扩展性和可维护性上，Less都让CSS开发有了大幅提升，动态性增强了。

以上是使用Bootstrap如何构建Web Page的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！