Bootstrap框架(JavaScript组件)

这篇具有很好参考价值的文章主要介绍了Bootstrap框架(JavaScript组件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

上一章博客我们讲解了Bootstrap的组件
这一章我们来讲一下一些JavaScript组件

一,JavaScript插件简介

  • 为什么需要JavaScript插件?
    • 项目中遇到复杂的交互效果,如轮播图、模态框等可以使用JavaScript插件轻松完成
  • 插件的引入方式
  • data属性
    • data属性让JavaScript插件使用门槛降低

二,插件的引入方式

  • 一次性全部插件引入
    • 通过将bootstrap.js或者bootstrap.min.js引入可实现一次性全部引入
  • 按需单个引入插件
    • 使用Bootstrap框架提供的单个“*.js”文件,只引入某一个插件使用

三,data属性

  • JavaScript插件可以不写任何的JavaScript代码就能实现动态效果
    • 只需要按照data属性去操作即可

data属性有很多,这些属性都是在data后紧跟一些名词,例如比较常用的data-toggle、data-target、data-dismiss等

  • JavaScript插件的使用方法
    • 使用data属性来调用JavaScript插件
    • 使用原生代码来调用JavaScript插件

考虑到使用的方便性和快捷性,比较推荐使用data属性来调用JavaScript插件

四,关闭data属性

  • 需自己封装data属性功能,希望Bootstrap框架的data属性不影响自己封装的功能时,需要将Bootstrap框架的data属性关闭

语法

$(document).off('.data-api');
  • 如何只针对某个特定的插件将data属性关闭?
    • 只需在 data-api 前面添加特定插件的名称作为命名空间

语法

// 关闭旋转轮播插件的data属性
$(document).off('.carousel.data-api');

五,过渡插件

  • Bootstrap使用的动画过渡效果都是基于CSS3动画来制作的,所以IE6-IE8浏览器不能使用过渡效果

如果使用压缩版的 bootstrap.min.js 文件,则无需再单独引入过渡插件,因为此时过渡插件的功能已经融入到其他插件中

  • 过渡插件严格意义上不是一个标准的插件,是针对transitionEnd 事件的一个基本辅助工具
    • 常被其他插件用来检测当前浏览器是否支持 CSS 的过渡效果
  • 过渡效果可以在全局范围禁用,必须将禁用代码放在 transition.js (或 bootstrap.min.js)后面
    语法
$.support.transition = false;

六,模态框

  • 模态框(Modal)是覆盖在父窗体上的子窗体
    • 目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下有一些互动
  • 模态框组成部分
    • 模态框包含头部(模态框标题和关闭按钮)、中间内容区域和一组放置于底部的按钮

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
</style>
<body>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        显示模态框
    </button>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline" action="#">
                        <div class="form-group">
                            <label for="user">用户名:</label>
                            <input type="text" class="form-control" id="user" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="pwd">密码:</label>
                            <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
                        </div>
                        <input type="submit" class="form-control" value="登录">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>

</script>
</html>

Bootstrap框架(JavaScript组件),javascript,bootstrap,前端
Bootstrap框架(JavaScript组件),javascript,bootstrap,前端
注意

data-target="#myModal" 里面的 #myModal 要和 下面的id对应
  • 千万不要在一个模态框上重叠另一个模态框,否则不会有效果
  • 务必将模态框的 HTML 代码放在文档的最高层级内(作为 body 元素的直接子元素),避免其他组件影响模态框的展现和功能
6.1,JavaScript操作模态框
  • 除data属性之外,也可以使用JavaScript操作模态框

  • 只需一行 JavaScript 代码

    • 通过模态框的id调用模态框方法操作模态框
  • JavaScript操作模态框

    • 模态框属性
    • 模态框方法
    • 模态框事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
</style>
<body>


    <button type="button" class="btn btn-primary btn-lg" id="jsbtn">
        js模态框
    </button><br>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline" action="#">
                        <div class="form-group">
                            <label for="user">用户名:</label>
                            <input type="text" class="form-control" id="user" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="pwd">密码:</label>
                            <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
                        </div>
                        <input type="submit" class="form-control" value="登录">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
    $("#jsbtn").click(function(){
        $('#myModal').modal('show')
    })
</script>
</html>

Bootstrap框架(JavaScript组件),javascript,bootstrap,前端

6.2,模态框属性

通过JavaScript可以操作模态框属性
Bootstrap框架(JavaScript组件),javascript,bootstrap,前端

6.3,模态框方法
  • 模态框支持传入特定的字符串执行其内部方法
  • 常用的字符串名称和用法的描述

Bootstrap框架(JavaScript组件),javascript,bootstrap,前端

6.4,模态框事件
  • 在实际的开发中,有时候希望在模态框弹出之前或者之后执行一些特定的操作,该如何来操作呢?
    • 模态框提供一些事件用于监听模态框执行的过程,在这些过程中开发者可以执行自定义的代码
  • 模态框事件

Bootstrap框架(JavaScript组件),javascript,bootstrap,前端

七,选项卡简介

  • 选项卡(Tab)也被称为标签页。通过结合一些 data 属性,可以轻松地创建一个选项卡界面
  • 通过此插件可以把内容放置在选项卡甚至是下拉菜单标签页中
7.1,选项卡组成及实现
  • 选项卡是由选项卡菜单和选项卡面板两部分组成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签页</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#home" data-toggle="tab">
                菜鸟教程
            </a>
        </li>
        <li><a href="#ios" data-toggle="tab">iOS</a></li>
        <li class="dropdown">
            <a href="#" id="myTabDrop1" class="dropdown-toggle"
               data-toggle="dropdown">Java
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
                <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
            </ul>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <p>菜鸟教程是一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。</p>
        </div>
        <div class="tab-pane fade" id="ios">
            <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
                TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p>
        </div>
        <div class="tab-pane fade" id="jmeter">
            <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。</p>
        </div>
        <div class="tab-pane fade" id="ejb">
            <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。
            </p>
        </div>
    </div>


    
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
    $("ul a").on("shown.bs.tab",function(e){
        e.target
        e.relatedTarget 
    })
</script>
</html>

Bootstrap框架(JavaScript组件),javascript,bootstrap,前端

7.2,选项卡使用中注意点
  • 实现选项卡的注意点
    • 实现选项卡面板时,选项卡菜单和选项卡面板需同时存在
    • 实现关键在于设置data-toggle=“tab”,每个选项卡菜单和选项卡面板是通过id对应的,对应之后点击选项卡菜单才能显示对应的选项卡面板
    • 选项卡面板都需要放置在类名为tab-content的div元素中
7.3,胶囊式选项卡
  • 使用胶囊式选项卡需要注意
  • 将类名nav-tabs更换为nav-pill
  • 将类名data-toggle的值由tab更换为pill
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签页</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <ul id="myTab" class="nav nav-pills">
        <li class="active">
            <a href="#home" data-toggle="pill">
                菜鸟教程
            </a>
        </li>
        <li><a href="#ios" data-toggle="pill">iOS</a></li>
        <li class="dropdown">
            <a href="#" id="myTabDrop1" class="dropdown-toggle"
               data-toggle="dropdown">Java
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#jmeter" tabindex="-1" data-toggle="pill">jmeter</a></li>
                <li><a href="#ejb" tabindex="-1" data-toggle="pill">ejb</a></li>
            </ul>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <p>菜鸟教程是一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。</p>
        </div>
        <div class="tab-pane fade" id="ios">
            <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
                TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p>
        </div>
        <div class="tab-pane fade" id="jmeter">
            <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。</p>
        </div>
        <div class="tab-pane fade" id="ejb">
            <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。
            </p>
        </div>
    </div>


    
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
    $("ul a").on("shown.bs.tab",function(e){
        e.target
        e.relatedTarget 
    })
</script>
</html>

Bootstrap框架(JavaScript组件),javascript,bootstrap,前端

八,轮播图简介

  • 旋转轮播(Carousel)又称轮播图
  • 是一种灵活的并且响应式的向站点添加滑块的方式
  • 内容可以是图像、内嵌框架、视频或者其想要放置的任何类型
8.1,旋转轮播实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
     .focus {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px auto;
    }
        
    .carousel,
    .carousel img {
        width: 100%;
        height: 500px!important;
    }

</style>
<body>
    <div class="container">
        
    </div>

    <hr>

    
<div class="focus">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators 小圆点-->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides 轮播图-->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="../../淘宝/img/轮播图1.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图1.png" alt="...">
                </div> -->
            </div>
            <div class="item">
                <img src="../../淘宝/img/轮播图2.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图2.png" alt="...">
                </div> -->
            </div>
            <div class="item">
                <img src="../../淘宝/img/轮播图3.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图3.png" alt="...">
                </div> -->
            </div>
        </div>

        <!-- Controls 左右翻页-->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- //设置自动播放换图时间   单位ms -->
<script>
    $('.carousel').carousel({
        interval: 2000
    })
</script>
</html>

Bootstrap框架(JavaScript组件),javascript,bootstrap,前端

8.2,旋转轮播结构分析
  • 旋转轮播包含三个部分:图片容器、圆圈指示符、左右控制按钮
    • 图片容器是旋转轮播的主体区域,主要承载需要展示的内容
      • 所展示的内容放置在类名为item的div中
      • 所有需要展示内容被类名为carousel-inner的div包裹
    • 圆圈指示符的作用是定位当前轮播的位置,当点击圆圈指示符时也可以切换轮播图
      • 圆圈指示符的结构由有序列表构成
      • 列表的个数是由图片展示区域的item的个数决定的
    • 左右控制按钮的作用是点击控制按钮控制轮播方向
      • 左右控制按钮是使用两个a元素实现的
      • 这两个a元素上都使用了data-slide属性
      • 属性值只能是prev或者next,分别表示上一张或者下一张
8.3,带有文字描述的旋转轮播
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
     .focus {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px auto;
    }
        
    .carousel,
    .carousel img {
        width: 100%;
        height: 500px!important;
    }

</style>
<body>
    <div class="container">
        
    </div>

    <hr>

    
<div class="focus">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators 小圆点-->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides 轮播图-->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="../../淘宝/img/轮播图1.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图1.png" alt="...">
                </div> -->
                    <div class="carousel-caption">
                      <h3>途欢黄金体验</h3>
                      <p>人生路途与健康同行畅快出行</p>
                    </div>
            </div>
            <div class="item">
                <img src="../../淘宝/img/轮播图2.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图2.png" alt="...">
                </div> -->
            </div>
            <div class="item">
                <img src="../../淘宝/img/轮播图3.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图3.png" alt="...">
                </div> -->
            </div>
        </div>

        <!-- Controls 左右翻页-->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- //设置自动播放换图时间   单位ms -->
<script>
    $('.carousel').carousel({
        interval: 2000
    })
</script>
</html>

Bootstrap框架(JavaScript组件),javascript,bootstrap,前端

8.4,旋转轮播的data属性
  • 旋转轮播插件中除了data-ride、data-slide等,还支持其他的三个data属性

Bootstrap框架(JavaScript组件),javascript,bootstrap,前端
以上三个data属性都可使用在旋转轮播外层父容器上文章来源地址https://www.toymoban.com/news/detail-627438.html

最后

送大家一句话:只要有决心和毅力,什么时候也不算晚。

到了这里,关于Bootstrap框架(JavaScript组件)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 用前端框架Bootstrap和Django实现用户注册页面

    命令如下: 执行下面条命令依次创建需要的应用: 名叫users的应用创建好后,还需要在全局配置文件中对应在用进行注册,具体方法如下: 打开““E:Python_projectP_001myshop-testmall_backendmall_backendsettings.py””文件,找到名叫“INSTALLED_APPS”的列表(list),在其中加入应用名,

    2024年02月06日
    浏览(51)
  • 学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 所属的专栏: 前端泛海 景天的主页: 景天科技苑 Bootstrap官网 一、什么是Bootstrap? bootstrap是一个基于HTML、CSS和Javascript语言编写的框架,具有简单、灵活的特性,拥有样式库、组件和插件,bootstrap常

    2024年03月11日
    浏览(41)
  • 【.net core】yisha框架,bootstrap-table组件增加固定列功能

    需要引入 bootstrap-table-fixed-columns.css和bootstrap-table-fixed-columns.js文件 文件代码: bootstrap-table-fixed-columns.css样式文件代码 bootstrap-table-fixed-columns.js脚本文件代码:  样式及脚本存放路径 项目bundleconfig.json文件修改内容为图片中红框标记内容 yisha-jquery-bootstrap-table-plugin.js脚本文件

    2024年01月21日
    浏览(49)
  • 用前端框架Bootstrap的AdminLTE模板和Django实现后台首页的页面

    承接博文 用前端框架Bootstrap和Django实现用户注册页面 继续开发实现 后台首页的页面。 以下需要的四个文件夹及里面的文件百度网盘下载链接: https://pan.baidu.com/s/1QYpjOfSBJPmjmVuFZdSgFQ?pwd=o9ta 下载 AdminLTE-3.1.0-rc 并解压缩 把文件夹 other 和 pages 复制到 “E:Python_projectP_001myshop-t

    2024年02月06日
    浏览(43)
  • HTML5期末大作业:游戏网站设计与实现——基于bootstrap响应式游戏资讯网站制作HTML+CSS+JavaScript

    🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年01月17日
    浏览(54)
  • Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框

    Bootstrap的JavaScript的模态框(modal)是覆盖在父窗体上的子窗体。通常,目的是显示一个单独的内容,可以在不离开父窗体的情况下有一些互动。 子窗体可以自定义内容,可提供信息展示、交互等功能。 运行效果如下: 一个完整的模态框包括三个部分:头部、正文和页脚,分别

    2024年02月04日
    浏览(59)
  • BootStrap4:组件

    Bootstrap包括多个预定义的按钮样式,每个样式都有自己的语义目的,另外还有一些额外的功能可以用于更多的控制。 样式效果: 源代码: .btn 在引用中,实现轮廓按钮可以用默认修饰符类替换.btn-outline-*任何按钮上的所有背景颜色和图像。 样式效果: 源代码: 1.3.1、水平按

    2024年02月03日
    浏览(32)
  • Bootstrap 框架详解

    框架顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的,其功能单一,并且比较小。 前端常用的框架有 Bootstrap、Vue、Angu

    2024年02月05日
    浏览(49)
  • Flask 框架集成Bootstrap

    前面学习了 Flask 框架的基本用法,以及模板引擎 Jinja2,按理说可以开始自己的 Web 之旅了,不过在启程之前,还有个重要的武器需要了解一下,就是著名的 Bootstrap 框架和 Flask 的结合,这将大大提高开发 Web 应用的效率。 Bootstrap 是 Twitter 公司的设计师 Mark Otto 和 Jacob Thornto

    2024年02月13日
    浏览(45)
  • JQ-6 Bootstrap入门到实战;Bootstrap的(优缺点、安装、响应式容器原理、网格系统、响应式工具类、Bootstrap组件);项目实践

    Bootstrap 读音 /ˈbu:tstræp/ ,是一个 非常受欢迎的前端框架 ,官方网站将其描述为。 最流行的 HTML、CSS 和 JS 框架,用于在 Web 上开发响应式、移动优先的项目。(v3.x) 响应式页面:页面布局会随着屏幕尺寸的变化而自动调整布局,作用是适配各个屏幕。 Bootstrap是功能强大、可扩

    2024年02月15日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包