Bootstrap是一个用于快速开发Web应用程序和网站的前端框架,来自Twitter,是目前较受欢迎的前端框架。Bootstrap基于HTML、CSS、JS,它简洁灵活,使得Web开发更加快捷。
Bootstrap是由美国 Twitter公司的两个员工合作开发的。Bootstrap是2011年8月在GitHub上发布的开源产品。目前使用较广的版本是Bootstrap 3和Bootstrap 4。其中,Bootstrap 3的最新版本的是Bootstrap 3.3.7,Bootstrap 4的最新版本是Bootstrap 4.6.0。2020年6月中旬,Bootstrap团队发布了Bootstrap 5 alpha版本;2020年12月发布了Bootstrap 5 beta版本;2021年5月6日发布了Bootstrap 5.0.0正式版。本书以Bootstrap 4.6.0版本为基础进行讲解。
在学习Bootstrap前,读者必须具备HTML、CSS和JS的基础知识。简单来说,Bootstrap是一个快速搭建网站前台页面的开源项目(基于 jQuery)。读者只需要了解相关的 class、标签名称等所代表的含义,在构建页面的时候,导入 Bootstrap 的 JS、CSS 等,它就会表现出相应的效果。
比如“HTML 说明:缩略语;”,当鼠标指针指向缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 元素的增强样式。缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标指针移至上面时会变成带有“?”的指针。当你的段落文字中的某个单词或者词语需要有上面的那种效果时,就可以用缩略语格式来书写,附加的 class="initialism"语句可以让字号显示得更小一点,也可以不要。反过来说,如果不使用Bootstrap或者其他类似的框架,那就得自己动手编写程序来获得上述效果,从而导致开发时间拉长。
此外,还有大量其他有用的前端组件,比如dropdowns(下拉菜单)、navigation(导航)、modals(模态框)、pagination(分页)、carousal(轮播)、breadcrumb(面包屑导航)、Tab(书签页)等。有了这些,我们可以搭建一个 Web项目,并让它运行得更快速、更轻松。