- Bootstrap基础教程
- 赵丙秀 汪晓青 李文蕙主编
- 441字
- 2025-02-08 17:18:03
1.6 案例:Bootstrap实例
本书所使用的编辑器为HBuilderX,浏览器为Chrome。
在HBuilder中新建一个Web项目,将下载的Bootstrap框架中的bootstrap.min.css文件复制到 CSS目录下。
![](https://epubservercos.yuewen.com/5D9695/31751384504064006/epubprivate/OEBPS/Images/figure-0016-0006.jpg?sign=1739588577-Ap7mDyw1pzs4wY5eiHyQsVbcvIyJC6By-0-01e93066d0a432a1abb63aa85d1b11df)
案例视频1
【实例1-1】(文件index.html)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/bootstrap.min.css"/> <title>Bootstrap实例</title> </head> <body> <div class="container"> <div class="jumbotron"> <h1>一个Bootstrap实例</h1> <p>Bootstrap包含了HTML、CSS和 JavaScript三大主要部分!</p> </div> <div class="row"> <div class="col-sm-4"> <h3>第 1列</h3> <p>Bootstrap的HTML是基于HTML5的前沿技术!</p> <p>灵活高效,简洁流畅!</p> </div> <div class="col-sm-4"> <h3>第 2列</h3> <p>Bootstrap的CSS是使用Less创建的CSS,是新一代的动态CSS!</p> <p>对用户来说,阅读更轻松!</p> </div> <div class="col-sm-4"> <h3>第 3列</h3> <p>Bootstrap的JavaScript是使用jQuery的CSS,是优秀的JavaScript!</p> <p>是用一个代码库,将常用的函数存储进去,按需取用!</p> </div> </div> </div> </body> </html>>
以上代码在Chrome浏览器中的运行效果如图1-3所示。
![](https://epubservercos.yuewen.com/5D9695/31751384504064006/epubprivate/OEBPS/Images/figure-0017-0007.jpg?sign=1739588577-1J2nLlkf3F53HsX1hh1cbx8xW15OoZHV-0-cb63bb8d6268fc00dd8714632709c15f)
图1-3 在 Chrome浏览器中的运行效果(使用 Bootstrap)
假设【实例1-1】中没有正确引入bootstrap.min.css文件,则其运行效果如图1-4所示。
![](https://epubservercos.yuewen.com/5D9695/31751384504064006/epubprivate/OEBPS/Images/figure-0017-0008.jpg?sign=1739588577-t7Oms6Cr76aRsTQ7SHov51efwp4k27dt-0-0ae8a03c14c59d23e3d1c7c8fc9c90e4)
图1-4 运行效果(未使用 Bootstrap)
在上述例子中,因为没有使用 Bootstrap框架中的 JS插件的内容,所以没有包含 jquery.js或jquery.min.js文件,以及bootstrap.js或者bootstrap.min.js文件。
在Chrome浏览器中,按 F12键打开“开发者工具”。单击“Toggle device toolbar”图标,打开设备选择工具栏,可以在工具栏中选择设备浏览页面。图1-5所示为在 iPad设备中浏览页面。在后面的章节中,读者可以自行进行此操作,以便查看不同设备上的显示效果。
![](https://epubservercos.yuewen.com/5D9695/31751384504064006/epubprivate/OEBPS/Images/figure-0018-0009.jpg?sign=1739588577-AL6XfHiWSuMBfJrUiGRx0YIgy9NN1iju-0-4ee1f85116c743e753a1926dc6b82b66)
图1-5 在iPad中浏览页面