首页 > css教程 > 正文

如何在HTML页面中使用bootstrap框架(图文详解)

原创 2018-10-13 15:29:27 0 787
赞助会员专享特权
前端开发框架有很多,比如:layui,MUI,bootstrap等,那你会用bootstrap框架写页面吗?这篇文章就和大家讲讲bootstrap框架的使用方法,有一定的参考价值,感兴趣的朋友可以看看。

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

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

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

aaaammmmmm.jpg

AAAAAa.jpg

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

CCCCCCCa.jpg

DDDDDDa.jpg

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

EEEEEa.jpg

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

FFFFFFa.jpg

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

ZZZZZZa.jpg

VVVVVVVa.jpg

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

以上详细介绍了bootstrap框架的使用方法,看起来简单,但是很容易出错,希望初学者自己动手尝试,看看效果能不能实现。

以上就是如何在HTML页面中使用bootstrap框架(图文详解)的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:HTML,bootstrap框架
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • bootstrap网页框架的使用方法_javascript技巧
  • BootStrap文件上传样式超好看【持续更新】_javascript技巧
  • Bootstrap使用心得之文本_html/css_WEB-ITnose
  • bootstrap学习笔记bootstrap安装环境_html/css_WEB-ITnose
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • Bootstrap 中文手册 Bootstrap 中文手册
  • 麦子学院bootstrap入门视频教程 麦子学院bootstrap入门视频教程
  • Bootstrap3参考手册 Bootstrap3参考手册
  • 独孤九贱(7)_Bootstrap视频教程 独孤九贱(7)_Bootstrap视频教程
  • 9天学会html+css+bootstrap视频教程 9天学会html+css+bootstrap视频教程
  • 相关视频章节