精华内容
下载资源
问答
  • bootstrap4
    千次阅读
    2022-04-10 21:12:06

    bootstrap4 popper.min.js

    popper.min.js 用于设置弹窗、提示、下拉菜单,是第三方插件,目前 bootstrap.bundle.min.js 已经包含了 popper.min.js,所以bootstarp4的js只引用 bootstrap.bundle.min.js即可

    <script src="bootstrap-4.4.1/js/popper.min.js" ></script>
    <script src="bootstrap-4.4.1/js/bootstrap.min.js" ></script>
    

    等价于

    <script src="bootstrap-4.4.1/js/bootstrap.bundle.min.js" ></script>
    

    Bootstrap4 CDN

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    
    
    ```
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js和bootstrap.min.js,所以一般引入 bootstrap.bundle.min.js 即可 -->
    
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
    更多相关内容
  • Axure8 的 Bootstrap4 组件库

    热门讨论 2018-01-26 16:54:49
    Axure8 的 Bootstrap4 组件库,已测试支持Axure RP 8,已包含常见功能,如:分页,所有样式的按钮,搜索框,日历等等。
  • Bootstrap4中文整理版文档。收集整理的Bootstrap4文档,重新排版,支持目录索引。
  • 关于bootstrap4 以下 与bootstrap5 的区别

    千次阅读 2022-02-06 10:47:36
    过年了,好无聊,顺便把bs5 学习了下,看了下B站的课程和官方文档,感觉比BS4 更容易操作了,慢慢的变成了一个组件性的东西,觉得跟vue.js 一起用,应该不错,特此总结说明下,BS5 与之前版本的区别, 目录 1.不...

    过年了,好无聊,顺便把bs5 学习了下,看了下B站的课程和官方文档,感觉比BS4 更容易操作了,慢慢的变成了一个组件性的东西,觉得跟vue.js 一起用,应该不错,特此总结说明下,BS5 与之前版本的区别,

    目录

    1.不支持IE浏览器

    2.更加移动了,做移动更加灵活了,增加了 断点的功能,更加屏幕的大小,分为了5类,而且每类都能设定 显示位置

    3.细节的问题增加了,背景色了,字体颜色了,可以直接在CLASS 里面设置了,不用特别设定style 了 ,也比较方便

    4. 需要在 head 里面引入:(这个在BS4 里面就有要求,不算增加),不能貌似更加要求了,不加的话,根本用不了BS5

    5.完全去掉jq(全部用自己的js就行了),仅仅导入2个文件(注意:这里是用的django的静态设置),主要是后面的2个文件(  bootstrap.min.css,bootstrap.bundle.min.js) ,导入这2个文件就能支持自己的全部内容,JS 里面也有说明用法,不过,不太习惯,习惯用自己的

    6.颜色增加到到了8种,基本也够用了(跟前面的版本类似,可以用到各种地方)        


    2.更加移动了,做移动更加灵活了,增加了 断点的功能,更加屏幕的大小,分为了5类,而且每类都能设定 显示位置

    $grid-breakpoints: (
      xs: 0,
      sm: 576px,
      md: 768px,
      lg: 992px,
      xl: 1200px,
      xxl: 1400px
    );
    

    大概 5类屏幕的选择,可以根据项目的要求 更加有针对性的设置,大概5个级别,当然了,也可以 通过 Sass 里面自己设置增加项,不过,一般的够用了

    container-fluid-mb

    3.细节的问题增加了,背景色了,字体颜色了,可以直接在CLASS 里面设置了,不用特别设定style 了 ,也比较方便

    4. 需要在 head 里面引入:(这个在BS4 里面就有要求,不算增加),不能貌似更加要求了,不加的话,根本用不了BS5

      <meta name="viewport" content="width=device-width, initial-scale=1">

    5.完全去掉jq(全部用自己的js就行了),仅仅导入2个文件(注意:这里是用的django的静态设置),主要是后面的2个文件(  bootstrap.min.css,bootstrap.bundle.min.js) ,导入这2个文件就能支持自己的全部内容,JS 里面也有说明用法,不过,不太习惯,习惯用自己的

    <link rel="stylesheet" href="{% static 'css/bootstrap.min5.css' %}">
    <script src="{% static 'js/bootstrap.bundle.min.js' %} "></script>

    6.颜色增加到到了8种,基本也够用了(跟前面的版本类似,可以用到各种地方)        

    $theme-colors: (
      "primary":    $primary,
      "secondary":  $secondary,
      "success":    $success,
      "info":       $info,
      "warning":    $warning,
      "danger":     $danger,
      "light":      $light,
      "dark":       $dark
    );
    
    展开全文
  • bootstrap4日期时间选择器插件

    千次阅读 2021-12-05 10:32:56
    https://getdatepicker.com/5-4/Options/#timezone

    一、引入文件

    bootstrap的版本号是个很令人头大的问题,这里提供一下我使用的版本号

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css">
    <!-- 下面这个很重要,没有这个文件,很多图标显示不出来 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >	
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <!-- 下面是个时间插件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <!-- 网上很多人都没说要下面这个文件,引入这个文件,可以将英文转成中文 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"></script>
    

    二、HTML结构

    bootstrap4的日期选择器插件有固定的结构

    <div class="form-group">
       <div class="input-group date" id="datetimepicker" data-target-input="nearest">
           <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker" id="dateTime">
           <div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
               <div class="input-group-text"><i class="fa fa-calendar"></i></div>
           </div>
       </div>
    </div>
    

    三、JS初始化

    在js中使用datetimepicker方法来初始化这个插件

    <script>
    	$(function () {
    	    $('#datetimepicker').datetimepicker({
    	      //配置参数
    	    });
    	});
    </script>
    

    四、配置参数

    在初始化的方法中配置参数,实现自己想要的效果,我这边列举了一点常用的,详细的官方文档是:https://getdatepicker.com/5-4/Options/#timezone

    <script>
       $(function () {
            $('#datetimepicker').datetimepicker({
                //配置参数
                format:false,   //配置时间格式
                autoclose:true,     //选择一个时间后自动关闭选择框
                buttons: {      //显示哪些按钮
                    showToday: true,
                    showClear: true,
                    showClose: true
                },
                stepping: 5,            //分钟的增减步长
                minDate:false,          //能选择的最小日期
                maxDate:false,          //能选择的最大日期
                useCurrent:true,        //使用当前的日期时间
                defaultDate: false,     //输入框中默认的日期
                collapse: true,         //面板折叠,默认true折叠起来
                sideBySide: false,      //面板平行排列,默认false纵向排列
                useStrict: true,        //输入的时间使用严格格式
                allowMultidate: false,  //允许选择多个日期,默认false只能选择一个日期
                disabledDates: ['2021/12/4'],   //不能使用的日期,默认false都能使用,如果要设置哪些天不能使用,放到一个数组中
                enabledDates: false,    //只能使用的日期,默认false都能选,如果要设置哪些天能使用,放到一个数组中
                tooltips:{              //设置按钮的提示信息
                    today: '今天',
                    clear: '清除',
                    close: '关闭',
                    selectMonth: '选择月份',
                    prevMonth: '上个月',
                    nextMonth: '下个月',
                    selectYear: '选择年份',
                    prevYear: '上一年',
                    nextYear: '下一年',
                    selectDecade: '选择时期',
                    selectDate:'选择日期',
                    selectTime:'选择时间',
                    prevDecade: '上个年代',
                    nextDecade: '下个年代',
                    prevCentury: '上个世纪',
                    nextCentury: '下个世纪',
                    incrementHour: '增加一小时',
                    pickHour: '选择小时',
                    decrementHour:'减少一小时',
                    incrementMinute: '增加一分钟',
                    pickMinute: '选择分',
                    decrementMinute:'减少一分钟',
                    incrementSecond: '增加一秒',
                    pickSecond: '选择秒',
                    decrementSecond:'减少一秒'
                },
            locale: 'zh-CN' //中文
            });
        });
    </script>
    
    展开全文
  • Bootstrap4文件上传控件美化

    千次阅读 2020-01-09 16:40:09
    Bootstrap拯救了不太会html+css的我,同时Bootstrap也太方便了,但是,也有一点受限默认一些功能看不到了,今天用到文件上传控件,HTML默认的和Bootstrap4的自定义...Bootstrap4的自定义的,右端的“Browse”很碍眼...

    Bootstrap拯救了不太会html+css的我,同时Bootstrap也太方便了,但是,也有一点受限默认一些功能看不到了,今天用到文件上传控件,HTML默认的和Bootstrap4的自定义的都不太合适。

    参考:https://blog.csdn.net/qq_34559890/article/details/89675998

    BootStrap4的默认样式

    Bootstrap4的自定义的,右端的“Browse”很碍眼,选择上传文件并不显示上传文件的名字,看不到就不确定是否选择了上传文件。

    html默认样式

    HTML默认的,按钮不是常见Button,没法应用BootStrap4美化,可是右边显示上传文件的文件名。

    网上看了一些,最后自己修改了出来,效果如下:

    我修改的

    代码如下:

    <script>
        function loadFile(file){
            $("#filePos").html(file.name);
        }
    </script>
    
    <div class="form-group">
        <input type="file" name="fileName" id="file" style="width: 0;height: 0" οnchange="loadFile(this.files[0])"><br>
    <!--默认的HTML文件上传控件,onchange属性调用JavaScript读取上传的文件名,修改第二个标签的显示内容,同时设置该上传控件长宽为0不显示,不占用页面控件,或者设置hidden,但是会占用一点空间-->
        <label class="btn btn-info" for="file">上传文件</label>
    <!--利用标签的for属性实现点击标签触发文件上传,同时设计成按钮样式-->
        <label id="filePos">未上传</label><!--定义一个显示文件名的标签-->
    </div>

    目前,可以用了。

    展开全文
  • Bootstrap4 安装方式

    千次阅读 2019-05-13 17:20:40
    可以通过两种方式来安装 Bootstrap4: 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 一、Bootstrap4 CDN 库: 国内推荐使用 :https://www.staticfile.org/ <!-- 新 Bootstrap...
  • bootstrap5 .me-auto .ms-auto bootstrap4 .ml-auto .mr-auto先看css样式bootstrap5 .ms-auto元素居右 .me-auto元素居左 bootstrap4 .ml-auto元素居右 .mr-auto元素居左
  • bootstrap v4 toast轻提示正确用法

    千次阅读 2020-07-25 17:52:20
    用vue和小程序开发的同学会感到里面的toast轻提示很好,可惜bootstrap4以上才支持,而它的帮助里写的代码感觉都是“扯淡”的,根本用不起来效果。 所以这里有标准的用法。 https://github.com/Script47/Toast ...
  • Bootstrap4Bootstrap4 安装使用

    千次阅读 2017-12-27 15:18:35
    Bootstrap4 安装使用 我们可以通过以下两种方式来安装 Bootstrap4: 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 Bootstrap 4 CDN 国内推荐使用 BootCDN 上的库: ...
  • bootstrap是一款十分流行的前端组件库,我们在制作模板的时候,使用bootstrap会提高工作效率,减少自己写css样式的麻烦。鲶鱼CMS系统的官方主题大部分是使用bootstrap来制作的,当然也有少部分是使用其他前端框架...
  • bootstrap4中文版入门教程 欢迎访问,之前在网上没找到中文版的教程,这个整理的不错,很适合新手入门。 https://www.fengjunzi.com/tool/bootstrap4/
  • vue中使用bootstrap4踩坑之旅

    千次阅读 2019-07-20 22:54:18
    bootstrap4中文官网 以下文章记录本人的踩坑过程,最后已亲测有效,但不保证是最简便的方法,最好的建议是去bootstrapvue官网看文档直接尝试。 一、引入jquery 1.安装jQuery npm install jquery --save 或 yarn ...
  • Bootstrap4使用教程

    千次阅读 2018-11-15 16:48:50
    本篇文章写给那些第一次接触Bootstrap框架的学习者,这篇文章将从最基础最基础的Bootstrap下载开始。对Bootstrap有使用经验的同学可以忽略本篇文章。 Bootstrap下载 可以自行百度Bootstrap下载,也可以直接通过此...
  • BootStrap4 文本颜色和背景颜色

    千次阅读 2019-08-28 12:43:43
    BootStrap4 文本颜色和背景颜色属性值和显示效果
  • Bootstrap4中使用垂直居中

    万次阅读 2018-06-18 11:05:56
    Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。...利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 ...Bootstrap4下载地址:&amp;gt;...
  • BootStrap4中使用图标

    万次阅读 2019-04-01 20:16:51
    BootStrap4中使用图标 bootstrap4已经不默认提供图标了,但我们可以引用bootstrap3的图标 1、首先,需要bootstrap3的jar包,解压后将其css中的font.css复制下来 2、将复制下来的font.css粘贴到bootstrap4的...
  • Bootstrap3 与Bootstrap4垂直水平居中

    万次阅读 多人点赞 2018-07-03 15:58:42
    Bootstrap水平居中 // 文本: class ="text-center" // 图片居中: class = "center-block" ...//bootstrap3水平居中:利用bootstrap列...class = "col-md-offset-4 col-lg-offset-4col-xl-offset-4" // boots...
  • 这里写自定义目录标题Bootstrap-input-spinner数字增减框特性安装使用html如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个...
  • Bootstrap4 图片形状——圆形实现

    千次阅读 2020-04-26 09:53:03
    Bootstrap4 图像形状——圆形实现 突然用到了Bootstrap4,要实现一个card里面的用户头像,需要正圆,但是看了文档,只有 .rounded实现图片的圆角,我尝试加入border-radius: 50%;去改成圆,但是发现白瞎。 后来网络...
  • Axure RP8 bootstrap 4 样式库,亲测有效!!使用方法:打开Axure8》元素库》载入元素库》选中本文件,enjoy
  • bootstrap4中文文档

    千次阅读 2019-03-09 15:38:15
    bootstrap官网 https://getbootstrap.com/ bootstrap 中文网 https://getbootstrap.net/ bootstrap4中文文档 https://getbootstrap.net/
  • 「自适应字体尺寸」,下简称 RFS,这也是 Bootstrap GitHub 仓库中的一个新项目。RFS根据访问者设备或浏览器窗口的尺寸自动计算合适的字体大小(font-size)。 下面是它的工作过程: 所有font-siz...
  • Bootstrap-table 图标显示不出来,使用的是Bootstrap4(引入umd的popper.js 和awesome整个文件) font-awesome没有引入,下载地址: https://fontaawesome.dashgame.com/ 如下显示出来了。 ASP.NET MVC get请求 ...
  • The best collection offree bootstrap admin templatesfor developers, these themes are time saver in your workflow, explore thesefree admin template for web applicationsto get more details. These p...
  • Bootstrap4 字体大小根据屏幕改变

    千次阅读 2019-10-21 16:42:08
    @import "bootstrap/functions"; @import "bootstrap/variables"; @import "bootstrap/mixins"; html { font-size: 1rem; } @include media-breakpoint-up(sm) { html { font-size: 1.1rem; } } @include ...
  • Bootstrap4模态框垂直居中

    千次阅读 2019-02-16 00:29:49
    Bootstrap4模态框垂直居中,只需要在添加.modal-dialog类的div再添加一个.modal-dialog-centered就可以了。具体如下。 Bootstrap4模态框默认不会居中显示在浏览器窗口中心而是显示在窗口顶部,在很多情况下这种设计...
  • bootstrap4样式不支持bootstrap-table

    千次阅读 2018-08-22 15:15:05
    bootstrap4与bootstrap-table  笔者最近在使用最新的bootstrap4框架做web后台界面,要进行引入bootstrap-table.js显示数据,首先不得不说这个组件功能很强大,基本融合了表格的...
  • bootstrap 4 在VS中的使用

    千次阅读 2019-04-19 11:09:01
    1. 创建一个空项目 2.右键项目名称,选择ManagerNuGet Packages ...3. 查找 bootstrap4,选择合适的版本安装 4. 把bootstrap.min.css,bootstrap.min.js 和jquery.js 引用进来 5.完成。 ...
  • 关于在bootstrap4中使用bootstrap-datetimepicker日期插件图标不显示的问题因为使用的是bootstrap4,我们直接引入[Font Awesome](http://fontawesome.dashgame.com/),在option中这样添加就ok啦 问题:在下图中可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 560,599
精华内容 224,239
关键字:

bootstrap4

友情链接: SystemForHi5.rar