在HTML页面中如何使用bootstrap框架-创新互联

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

成都创新互联公司服务项目包括吉首网站建设、吉首网站制作、吉首网页制作以及吉首网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，吉首网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到吉首省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

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

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

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

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

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

第四步：引入jQuery后，再用link引入CSS文件，最后用script引入JavaScript文件（注意：文件引入的顺序不能错，先是jQuery，再是CSS，最后是JavaScript），如图所示

第五步：现在可以编写页面了，只需套用 bootstrap中css定义的class类名即可，如有不清楚的可以访问bootstrap官网 。接下来就用按钮做个示范，在<button>标签中设置class为 btn btn-success ，运行就可以看到效果。

也许有人会问，没有给页面添加样式，那它的样式怎么来的呢？其实CSS样式已经封装在引入的CSS文件中，运行时直接被调用。如果对bootstrap默认的样式不满意，你可以找到对应的类名，修改成自己喜欢的样式。

上述内容就是在HTML页面中如何使用bootstrap框架，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联网站制作公司行业资讯频道。

网页标题：在HTML页面中如何使用bootstrap框架-创新互联
链接分享：https://www.cdcxhl.com/article18/ceeodp.html

成都网站建设公司_创新互联，为您提供微信公众号、外贸建站、定制网站、营销型网站建设、商城网站、网页设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联