在HTML页面中如何使用bootstrap框架

本篇文章为大家展示了在HTML页面中如何使用bootstrap框架,代码简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

为企业提供网站设计、做网站、网站优化、全网整合营销推广、竞价托管、品牌运营等营销获客服务。创新互联公司拥有网络营销运营团队,以丰富的互联网营销经验助力企业精准获客,真正落地解决中小企业营销获客难题,做到“让获客更简单”。自创立至今,成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题,同时降低了营销成本,提高了有效客户转化率,获得了众多企业客户的高度认可!

Bootstrap 是基于 HTML、CSS 和 JavaScript 的一款前端框架,其可以用来快速开发 Web 应用程序和网站,且所有的主流浏览器都支持 Bootstrap。因为该框架几乎包含了整个库的移动设备优先的样式,可以进行响应式设计,且容易上手,因此被广泛使用。接下里直接介绍bootstrap框架的使用方法。相关视频教程推荐:bootstrap教程

bootstrap框架官网:http://v3.bootcss.com

第一步:进入官网,下载Bootstrap 包,点击下载bootstrap,有三种文件可以选择,一般我们下载第一个就可以了。

在HTML页面中如何使用bootstrap框架

第二步:下载成功后有一个压缩文件,解压后可以看到一个文件夹包含css、fonts和 JS,然后将这些文件导入到编辑器里面,基本工作就完成了。(主要:不可以随便更改bootstrap默认的路径,否则会出错)

在HTML页面中如何使用bootstrap框架

在HTML页面中如何使用bootstrap框架

第三步:新建一个HTML文件,在标签下面先引入jQuery库,因为bootstrap框架很多地方用到了jQuery。

在HTML页面中如何使用bootstrap框架

第四步:引入jQuery后,再用link引入CSS文件,最后用script引入JavaScript文件(注意:文件引入的顺序不能错,先是jQuery,再是CSS,最后是JavaScript),如图所示

在HTML页面中如何使用bootstrap框架

第五步:现在可以编写页面了,只需套用 bootstrap中css定义的class类名即可,如有不清楚的可以访问bootstrap官网 。接下来就用按钮做个示范,在

其他资讯