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

前端开发框架有很多,比如: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文件,在

标签下面先引入jQuery库,因为bootstrap框架很多地方用到了jQuery。

EEEEEa.jpg

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

FFFFFFa.jpg

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

ZZZZZZa.jpg

VVVVVVVa.jpg

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

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

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

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 02:57:11
下一篇 2025年12月24日 02:57:16

相关推荐

  • 如何利用css的background绘制图形 (附代码)

    本篇文章给大家带来的内容是关于如何利用css的background绘制图形 (附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 相信大家在平时工作中少不了会被要求在某些元添加一些特殊的背景图片,这时候通常就拿起ps就是切切切。不说这种方式麻烦,有ui给你切好的情况已经不错,没…

    2025年12月24日 好文分享
    000
  • 如何使用纯CSS实现按钮的悬停效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现按钮的悬停效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom,容器…

    2025年12月24日
    000
  • 如何使用纯CSS实现从按钮两侧滑入元素的悬停效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现从按钮两侧滑入元素的悬停效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义…

    2025年12月24日
    000
  • 如何使用纯CSS实现宝路薄荷糖的动画(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现宝路薄荷糖的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom,只…

    2025年12月24日
    000
  • 如何使用纯CSS实现大白的形象(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现大白的形象(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 整个人物分为 3 部分…

    2025年12月24日
    000
  • 如何使用纯CSS实现圆点错觉的效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现圆点错觉的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 此项目无用户自定义…

    2025年12月24日
    000
  • 如何利用css3中的transform skewX实现平行四边形的导航菜单

    本篇文章给大家带来的内容是关于如何利用css3中的transform skewx实现平行四边形的导航菜单,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 平行四边形其实是矩形的超集:它的各条边是两两平行的,但各个角则不一定都是直角。在视觉设计中,平行四边形往往可以传达出一种动感。让我…

    好文分享 2025年12月24日
    000
  • 如何使用纯CSS实现类似脉动的loader(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现类似脉动的loader(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 do…

    2025年12月24日
    000
  • 如何使用纯CSS实现从按钮两侧滑入装饰元素的悬停特效(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现从按钮两侧滑入装饰元素的悬停特效(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 …

    2025年12月24日
    000
  • 如何使用纯CSS实现电源开关控件(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现电源开关控件(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom,包含 …

    2025年12月24日
    000
  • 图文详解如何让ul中的li元素横向排列(附代码)

    在页面布局时,我们经常会用到li标签,因为li标签用途很广泛,它可以用来制作列表,选项卡,导航等等。但是 标签里的li默认情况下是纵向排列的,那我们可不可以让li横向排列呢?这篇文章就给大家介绍两种方法,来实现html中ul列表横向排列。有需要的朋友可以参考一下,希望对你有用。 ul列表的横向排列在…

    2025年12月24日
    000
  • 如何使用CSS的Grid布局实现小狗邮票(附源码)

    本篇文章给大家带来的内容是关于如何使用css的grid布局实现小狗邮票(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…

    2025年12月24日
    000
  • 如何使用CSS的Grid布局实现小鸡邮票(附代码)

    本篇文章给大家带来的内容是关于如何使用css的grid布局实现小鸡邮票(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…

    2025年12月24日
    000
  • 如何使用CSS的Grid布局实现小松鼠邮票的效果(附源码)

    本篇文章给大家带来的内容是关于如何使用css的grid布局实现小松鼠邮票的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/front-…

    2025年12月24日
    000
  • 如何修改input中[type=”checkbox”]的样式

    有时候,html中的默认样式并不能满足我们的审美,我们想把它修改成自己喜欢的样式,那怎么办呢?接下来,这篇文章就和大家聊聊如何修改input中[type=”checkbox”]的样式,需要的小伙伴可以参考一下。 对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用…

    2025年12月24日 好文分享
    000
  • 如何使用纯CSS实现抽象的水波荡漾的动画(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现抽象的水波荡漾的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…

    2025年12月24日
    000
  • CSS怎么实现底部对齐?css实现底部对齐的三种方法

    本篇文章给大家带来的内容是关于css怎么实现底部对齐?css实现底部对齐的三种方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1、红色区域数据需要倒排(即从底部开始数,数字为1、2、3、4、5)…

    2025年12月24日
    000
  • 分享四种方式将CSS样式导入到HTML中

    在进行页面布局时,必然会用到css和html,因为html是页面的主体内容部分,css是页面的表现,通俗的讲,css是给html进行化妆的。那css的样式怎么在html中实现呢?这时候就需要在html中引入css文件,今天就和大家聊聊如何将css导入html中,有需要的可以参考一下。 将CSS导入H…

    2025年12月24日 好文分享
    000
  • 在html中引入CSS文件时,link和@import有什么区别?

    之前介绍了如何在html中引入css文件,将css导入html的方式有四种,分别是行内式,嵌入式,外部样式。外部样式又分为import导入式,link链接式。同样是外部样式,那link和@import的区别在哪里?想知道的小伙伴继续往下看吧。 一、引入方式的区别 link链接式: import导入式…

    2025年12月24日
    000
  • 什么是web标准??

    本章给大家介绍什么是web标准??通过介绍大家可以对web标准有更深入的了解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 web标准 不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)…

    好文分享 2025年12月24日
    000

发表回复

登录后才能评论
关注微信