网站建设资讯

NEWS

网站建设资讯

在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官网 。接下来就用按钮做个示范,在