怎样在HTML网页中使用bootstrap框架

在HTML网页中使用bootstrap框架的方法:首先引jQuery库到HTML网页中,引CSS用link;然后用bootstrap的CSS中的类美化按钮;最后添加类名。

怎样在HTML网页中使用bootstrap框架

本教程操作环境:windows10系统、bootstrapv4.4.1&&html5版,DELL G3电脑,该方法适用于所有品牌电脑。

在HTML网页中使用bootstrap框架的方法:

1、准备工作是下载好并解压bootstrap包,记住切不可自作主张更换改动bootstrap默认的路径,否则出错。如图所示,小编我把bootstrap库放在lib文件夹(自己设置的文件夹,可自命名),反正bootstrap里面的不要改,不要动。

ee743d52b1a9daddbc3e4d4f66db25f.png

立即学习“前端免费学习笔记(深入)”;

2、接着在bootstrap之前引jQuery库到你的HTML网页,原因自然是bootstrap很多地方用到jq,所以也要引jq。

645019774dcdb6bac723d28dde55af3.png

3、如图所示,引CSS用link,JS用script,bootstrap一般是用CSS居多。

7dd455bb6e6dda1fa5625d932a04677.png

4、接着我们来看看没有使用bootstrap的按钮是啥效果样式。

0b075560b969281f8b02697de247b36.png

5、如图,按钮灰白色,很难看,接着我们用bootstrap的CSS中的类美化按钮。

64150a09b4e1c10f30ec225a3be46d3.png

6、如图,添加类名就可以得到美化的效果了哟,这是警告类型的按钮。

03e9641a51b4788665e5a40b1f523a2.png

83db78d9a1e7fb98550106e3723e37e.png

7、那么,刚才用到的类怎么来的?就是在CSS里面的,在此可以看到这个。有很多,小伙伴们看下它写了哪些类,也可以去修改,这样便得到自己的结果了。

bd847f632f9085853c89623834f9b7a.png

相关推荐:《bootstrap基础教程》

以上就是怎样在HTML网页中使用bootstrap框架的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3001089.html

(0)
上一篇 2025年3月13日 00:11:13
下一篇 2025年2月26日 23:38:23

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Bootstrap中Typeahead组件的使用方法

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便。这里我们将介绍一下这个组件的使用。 相关推荐:《Bootstrap》 第一,简单使用 首先,最简单的使用…

    2025年3月13日
    200
  • 谈谈Bootstrap中的网格系统

    本篇文章和大家谈谈bootstrap中的网格系统。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关推荐:《bootstrap》 bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新…

    2025年3月13日 编程技术
    200
  • 浅谈风格的树形插件​bootstrap-treeview的使用方法

    相关推荐:《bootstrap基础教程》 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件,该jQuery插件基于Twitter Bootstrap。写这篇文章的目的在于记录下使用方法…

    2025年3月13日
    200
  • bootstrap 怎么关闭tab

    bootstrap关闭tab的方法:1、引入jquery;2、在相应的页面中引用“bootstrap-closable-tab”插件;3、通过“closeTab:function(item){…}”方法实现可关闭的tab标签页效…

    2025年3月13日 编程技术
    200
  • bootstrap有没有日历控件

    bootstrap有日历控件即时间日期日历控件,名称为“datetimepicker”,是一个Bootstrap组件,能够简化页面上日期、时间的输入。datetimepicker控件支持日期选择和格式设定、支持时间段选择控制,只需要在需要的…

    2025年3月13日 编程技术
    200
  • bootstrap 怎么关闭弹出框

    bootstrap关闭弹出框的方法:首先向元素添加“data-toggle=“popover””来创建弹出框;然后使用“data-trigger=“focus””属性来设置在鼠标点击元素外部区域来关闭弹出框即可。 本文操作环境:Window…

    2025年3月13日
    200
  • bootstrap 不支持ie怎么办

    bootstrap不支持ie的解决办法:首先确保HTML页面开始部分要有DOCTYPE声明;然后正确调用远程地址,并针对浏览器的内容做标识;最后检查并修改相应的js或css文件即可。 本文操作环境:Windows7系统、bootstrap3…

    2025年3月13日
    200
  • bootstrap如何兼容ie6

    bootstrap兼容ie6的方法:首先打开相应的页面代码;然后通过“”方式引入该js文件即可。 本文操作环境:Windows7系统、bootstrap3、Dell G3电脑。 Bootstrap 来自 Twitter,是目前最受欢迎的前端…

    2025年3月13日
    200
  • 浅谈Bootstrap中的close类–关闭按钮

    本篇文章给大家介绍一下bootstrap中的关闭按钮样式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关推荐:《bootstrap》 关闭按钮 为 或 bootstrap!! 以上就是浅谈Bootstrap中的clo…

    2025年3月13日
    200
  • 聊聊jsp页面中导入bootstrap的方法

    相关推荐:《bootstrap教程》 1.先在WebContent中导入以下三个文件(自行去官网下载:bootstrap教程 ,bootstrap教程) 2.新建.jsp文件,比如index.jsp,现在 标签里导入下面这些文件,注意顺序不…

    2025年3月13日
    200

发表回复

登录后才能评论