BootStrap4-1

最新推荐文章于 2022-01-14 14:18:35 发布
最新推荐文章于 2022-01-14 14:18:35 发布
阅读量1.6k 收藏 1
点赞数 2
分类专栏： bootstrap4 文章标签： jquery css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59938047/article/details/119889569
版权

1.BootStrap简介 

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

Sass--CSS扩展语言

Mixin--包含一段合法Sass代码，类似于C语言的宏定义。调用Mixin时，解释器会将Mixin扩展成它所包含的完整的Sass代码，因此可以有效地减少代码重复，从而写出更加干净的代码。CSS不支持Mixin，因此重复和类似的代码必须挨个书写。

2.移动设备优先.

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

3.Bootstrap4 安装使用

通过两种方式来安装 Bootstrap4：

1.使用 Bootstrap 4 CDN。

CDN的全称是Content Delivery Network，即内容分发网络.

    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
    <!-- Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.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 -->
    <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>
    <!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->

2.从官网 getbootstrap.com 下载 Bootstrap 4。

4.容器类

容器元素有两类：

container：固定宽度并支持响应式布局的容器 。

container-fluid:100%宽度，占据全部视口的容器。.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Document</title>
    <!-- Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery/jquery-3.5.1.min.js"></script>
    <!-- 用于弹窗、提示、下拉菜单，-->
    <script src="js/bootstrap.bundle.min.js"></script>
    <!--Bootstrap4 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <h3>容器元素有两类</h3>
    <h4 class="container  ">container：固定宽度并支持响应式布局的容器 </h4>
    <h4 class="container-fluid ">container-fluid:100%宽度，占据全部视口的容器</h4>

</body>

</html>

5.Bootstrap4 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

我们也可以根据自己的需要，定义列数。

Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。

网格类

Bootstrap 4 网格系统有以下 5 个类:

1、.col- 针对所有设备

2、.col-sm- 平板 - 屏幕宽度等于或大于 576px

3、.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px

4、.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px

5、.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px

网格系统规则

Bootstrap4 网格系统规则:

1、网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。

2、使用行来创建水平的列组。

3、内容需要放置在列中，并且只有列可以是行的直接子节点。

4、预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。

5、列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。

6、网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。

7、Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
    <!-- Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.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 -->
    <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>
    <!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
    <title>bootstrap4 网格系统</title>
</head>

<body>
    <div class="container text-center ">
        <div class="row bg-info">
            <div class="col-sm-1 bg-danger">1</div>
            <div class="col-sm-1">2</div>
            <div class="col-sm-1 bg-primary">3</div>
            <div class="col-sm-1">4</div>
            <div class="col-sm-1 bg-dark">5</div>
            <div class="col-sm-1">6</div>
            <div class="col-sm-1 bg-success">7</div>
            <div class="col-sm-1">8</div>
            <div class="col-sm-1 bg-white">9</div>
            <div class="col-sm-1">10</div>
            <div class="col-sm-1 bg-success">11</div>
            <div class="col-sm-1">12</div>
        </div>
        <div class="row">
            <div class="col-2 bg-primary">2</div>
            <div class="col-2">4</div>
            <div class="col-8 bg-danger">6</div>
        </div>
        <div class="row">
            <div class="col-md-8 bg-success">8</div>
            <div class="col-3">3</div>
            <div class="col-1 bg-success">1</div>
        </div>
        <div class="row bg-success">
            <div class="col-12">12</div>
        </div>
    </div>
</body>

</html>

屏幕宽度小于576px

 

6.Bootstrap4 文字排版

Bootstrap 4 默认设置

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5px。

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。

Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
    <!-- Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.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 -->
    <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>
    <!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
    <title>文字排版</title>
</head>

<body>
    <h1>html标题</h1>
    <h2>html标题</h2>
    <h3>html标题</h3>
    <h4>html标题</h4>
    <h5>html标题</h5>
    <h6>html标题</h6>
    <div class="container">
        <h1>bootstrap html标题</h1>
        <h2>bootstrap html标题</h2>
        <h3>bootstrap html标题</h3>
        <h4>bootstrap html标题</h4>
        <h5>bootstrap html标题</h5>
        <h6>bootstrap html标题</h6>
    </div>
    <h1>display标题类</h1>
    <h1>display 标题可以输出更大更粗的字体样式</h1>
    <div class="container ">
        <h1 class="display-1">display 标题类</h1>
        <h1 class="display-2">display 标题类</h1>
        <h1 class="display-3">display 标题类</h1>
        <h1 class="display-4">display 标题类</h1>
    </div>
</body>

</html>

下表提供了 Bootstrap4 更多排版类的实例：

类名

描述

.font-weight-bold

加粗文本

.font-weight-normal

普通文本

.font-weight-light

更细的文本

.font-italic

斜体文本

.lead

让段落更突出

.small

指定更小文本 (为父元素的 85% )

.text-left

左对齐

.text-center

居中

.text-right

右对齐

.text-justify

设定文本对齐,段落中超出屏幕部分文字自动换行

.text-nowrap

段落中超出屏幕部分不换行

.text-lowercase

设定文本小写

.text-uppercase

设定文本大写

.text-capitalize

设定单词首字母大写

.initialism

显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母

.list-unstyled

移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)

.list-inline

将所有列表项放置同一行

.pre-scrollable

使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
    <!-- Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.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 -->
    <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>
    <!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
    <title>文字排版</title>
</head>

<body>
    <p class="container font-weight-bold">font-weight-bold=加粗文本</p>
    <p class="container font-weight-normal">font-weight-normal=普通文本</p>
    <p class=" container font-weight-lighter ">font-weight-lighter=更细的文本</p>
    <p class="container font-italic">font-italic=斜体文本</p>
    <p class="container lead">lead=让段落更突出</p>
    <p class="container small">small=指定更小文本(为父元素的85%)</p>
    <p class="container text-left">text-left=左对齐</p>
    <p class="container text-center">text-center=居中</p>
    <p class="container text-right">text-right-右对齐</p>
    <p class="container text-justify">text-justify=设置文本对齐，段落中超出屏幕部分文字自动换行、text-justify=设置文本对齐，段落中超出屏幕部分文字自动换行、text-justify=设置文本对齐，段落中超出屏幕部分文字自动换行</p>
    <p class="container text-nowrap">text-nowrap=段落中超出屏幕部分不换行、text-nowrap=段落中超出屏幕部分不换行、text-nowrap=段落中超出屏幕部分不换行、text-nowrap=段落中超出屏幕部分不换行、</p>
    <p class="container text-lowercase">text-lowercase=设定文本小写</p>
    <p class="container text-uppercase">text-uppercase=设定文本大写</p>
    <p class="container text-lowercase">text-lowercase=单词首字母大写</p>
</body>

</html>

7. BootStrap颜色设置

文本颜色： .text-muted, .text-muted, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark , .text-light

背景颜色： .text-muted, .text-muted, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark , .text-light

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>bookstrap颜色设置</title>
</head>

<body>
    <h1>文本颜色</h1>
    .text-muted, .text-muted, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark , .text-light

    <h1>背景颜色</h1>
    .bg-muted, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-white, .bg-dark , .bg-light
    <h3 class="container text-muted bg-primary">文本颜色text-muted，背景颜色bg-muted</h3>
    <h3 class="container text-success bg-info">文本颜色text-success，背景颜色bg-info</h3>
    <h3 class="container text-warning bg-danger">文本颜色text-warning ，背景颜色bg-danger</h3>
    <h3 class="container text-white bg-secondary">文本颜色text-white ，背景颜色bg-secondary</h3>
    <h3 class="container text-light  bg-dark">文本颜色text-light ，背景颜色bg-dark</h3>
</body>

</html>

8..Bootstrap4 表格

Bootstrap4 通过 .table 类来设置基础表格的样式。

通过添加 .table-striped 类，您将在 <tbody> 内的行上看到条纹。

.table-bordered 类可以为表格添加边框。

.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）。

通过指定意义的颜色类可以为表格的行或者单元格设置颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>BookStrap表格设置</title>
</head>

<body>
    <div class="container">
        <table class="table table-striped table-bordered table-hover">
            <tr class="table-danger">
                <td>属性名称</td>
                <td>用法</td>
                <td>含义</td>
            </tr>
            <tr>
                <td>table</td>
                <td>class="table"</td>
                <td>默认的表格宽高和行分割线</td>
            </tr>
            <tr>
                <td>table-striped</td>
                <td>class="table-striped"</td>
                <td>默认的table中的行条纹显示</td>
            </tr>
            <tr>
                <td>table-bordered</td>
                <td>class="table-bordered"</td>
                <td>为表格添加边框</td>
            </tr>
            <tr>
                <td>table-hover</td>
                <td>class="table-hover"</td>
                <td>为表格的每一行添加鼠标悬停效果(灰色背景)</td>
            </tr>
            <tr>
                <td>table-info</td>
                <td>class="table-info"</td>
                <td>为表格设置背景颜色</td>
            </tr>
        </table>
    </div>
</body>

</html>

 9.Bootstrap4 图像形状

.rounded 类可以让图片显示圆角效果。

.rounded-circle 类可以设置椭圆形图片。

.img-thumbnail 类用于设置图片缩略图(图片有边框)。

.float-left 来设置图片左对齐。

.float-right 来设置图片右对齐。

img-fluid:设置响应式图片,根据屏幕的大小自动适应，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>BookStrap图像形状</title>
</head>

<body class="container">
    <h1>.rounded 类可以让图片显示圆角效果</h1>
    <img src="imgs/2048376.jpg" style="width: 200px;height: 100px;border: 2px solid blue " class=" rounded">
    <h1>.rounded-circle 类可以设置椭圆形图片</h1>
    <img src="imgs/2048376.jpg" style="width: 200px;height: 100px;border: 2px solid blue " class=" rounded-circle">
    <h1>.img-thumbnail 类用于设置图片缩略图(图片有边框)</h1>
    <img src="imgs/2048376.jpg" style="width: 200px;height: 100px; " class=" img-thumbnail">
    <h1>.float-left 来设置图片左对齐</h1>
    <img src="imgs/2048376.jpg" style="width: 200px;height: 100px; " class=" float-left">
    <h1>.float-right 来设置图片右对齐</h1>
    <img src="imgs/2048376.jpg" style="width: 200px;height: 100px; " class=" float-right">
    <h1>img-fluid:设置响应式图片,根据屏幕的大小自动适应，设置了 max-width: 100%; 、 height: auto; </h1>
    <img src="imgs/2048376.jpg" style="width: 200px;height: 100px; " class="img-fluid">
</body>

</html>

 10.Bootstrap4 信息提示框

提示框可以使用 .alert 类

.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接。

信息提示框中内容可添加超链接。

我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。

.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>提示框</title>
</head>

<body>
    <h4>提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接</h4>
    <h4>我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。</h4>
    <h4>.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果</h4>
    <div class="container">
        <div class="alert alert-info">
            <strong>提示框</strong>提示信息
        </div>
        <div class="alert alert-primary">
            <strong>提示框</strong>提示信息
            <a href="#" class="alert-link">链接</a>
        </div>
        <div class="alert alert-success alert-dismissible fade show">
            <button type="button" class="close " data-dismiss="alert">关闭</button>
            <strong>提示</strong>提示信息
        </div>
    </div>
</body>

</html>

大大126
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap4学习
Suxiaomowang的博客
08-25 855
btn 按钮 btn 按钮没有边框和背景 btn-xxxx 设置按钮背景 btn-outline-primary 设置按钮边框颜色鼠标进入后修改背景颜色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt.
bootstrap4学习
Suxiaomowang的博客
08-26 679
Bootstrap4 导航栏 用.navbar类来创建一个标准的导航栏 .navbar-expand-xl|lg|md|sm类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 用ul元素并添加class="navbar-nav"类。 然后在li元素上添加.nav-item类，a元素上使用.nav-link类: 删除.navbar-expand-xl|lg|md|sm类来创建垂直导航栏 bg-primary,.bg-success,.bg-info,...
bootstrap3.37稳定版本含（js和css）并带有jquery.min的2.1.1版本
11-03
bootstrap.3.3.7版本，含bootstrap.min.js和bootstrap.min.css、jquery.min的2.1.1
jquery-3.2.1.min.js及bootstrap-3.3.7-dist下载（jquery所有版本）
热门推荐
越努力，越幸福！
09-05 2万+
bootstrap-3.3.7-dist文件 (包含jquery-3.2.1.min.js)： 链接：https://pan.baidu.com/s/1LVQHeyWD0Pux-ms1_o6CYA 提取码：y4ga jquery-3.2.1.min.js： 链接(包含所有版本)：http://www.jq22.com/jquery-info122 ...
bootstrap-paginator.min.js下载
05-03
bootstrap-paginator-分页控件。 var options = { bootstrapMajorVersion: 3, currentPage: page, //当前页面 numberOfPages: 9, //一页显示几个按钮（在ul里面生成5个li） totalPages: pages ? pages : 1, //总页数 itemTexts: function (type, page, current) {//设置显示的样式，默认是箭头 switch (type) { case "first": return ""; case "page": return page; } }, onPageChanged : function(e,oldpage,newpage){ ajaxClass(newpage, pageSize); $('body').animate({ scrollTop: $("#PT-wraper").offset().top }, 100); }
Axure8 的 Bootstrap4 组件库
01-17
Axure8 的 Bootstrap4 组件库，已测试支持Axure RP 8，已包含常见功能，如：分页，所有样式的按钮，搜索框，日历等等。
select2-bootstrap4-theme：Bootstrap4的Select2 v4主题
01-29
select2-bootstrap4-主题 Bootstrap4的 v4主题（与boostrap 4.0.0+兼容） 现场演示 :backhand_index_pointing_right: 安装 CDN < link rel =" stylesheet " href =" /path/to/select2.css " > < link ...
bootstrap4-rtl:Bootstrap 4 RTL主题
05-25
bootstrap4-rtl Bootstrap 4 RTL主题 用法： <!-- Original Bootstrap 4.x --> < link rel =" stylesheet " href =" bootstrap.css " > <!-- Bootstrap RTL Theme --> < link rel =" ...
bootstrap4-api-plugin:提供Bootstrap 4的Jenkins插件
03-22
Bootstrap 4 Jenkins插件 提供Jenkins插件的 。根据他们的自我认知，Bootstrap是世界上最受欢迎的前端组件库，用于在Web上构建响应式，移动优先的项目。它是一个用于使用HTML，CSS和JS开发的开源工具包。开发人员...
AxureRP8的bootstrap4元件库
12-21
AxureRP8的bootstrap4的元件库，可以用其扩展axure功能，画出bootstrap效果的原型
bootstrap.bundle.min.js.map
04-12
浏览器报错找不到这个的可以下载这个
Bootstrap4_Theme_Library_v1_axure9 Axure 元件库.zip
07-23
Bootstrap4_for_AxureRP9元件库，安装方法，直接将rplib文件，复制进\Axure\Axure RP 9\DefaultSettings\Libraries 文件夹即可
axure原型设计bootstrap元件库 bootstrap_4_galvin
12-14
axure原型设计bootstrap元件库 bootstrap_4_galvin，包含基本组件
AxureRP8 Bootstrap4 元件
08-23
AxureRP8 上可以用 Bootstrap4 元件库
bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip
03-09
此外，Bootstrap 4对组件进行了重构，例如卡片（Cards）取代了原来的面板（Panels）、警告（Alerts）和模态（Modals）等，使其更加轻量级和灵活。JavaScript组件也得到了增强，比如加入了新的 Collapse 组件，用于...
bootstrap4-editable.7z
08-02
而“bootstrap4-editable.7z”这个压缩包正是为增强BootstrapTable的功能而设计的，特别是针对行内编辑的需求。 在BootstrapTable中实现行内编辑，通常会用到x-editable库，这是一个轻量级的解决方案，允许用户直接...
BootStrap框架模块:BootStrap4组件
LiLi的博客
01-14 1875
BootStrap4组件 1.1 BootStrap组件部分一 警告提示框(Alert) 警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供常见的上下反馈消息和提示。 警报是一组颜色控件（共八个颜色样式），可用于任何长度的文本，以及可选的关闭按钮，系统提供8个可用的正确的样式（如，.alert-success），如你还可以使用jQuery插件方法来解除内联元素。 <div class="alert alert-primary" role="alert"> A simple prim
Bootstrap元件库
11-21
Bootstrap元件库，下载后在Axure中导入即可使用。提供Bootstrap组件的Axure元件。
bootstrap col-md-4
最新发布
06-28
bootstrap col-md-4是Bootstrap框架中的一个类，用于定义网页布局中的列（column）。其中，md表示中等屏幕（medium screen）的大小，4表示该列占据了网页布局中的四分之一宽度。因此，使用col-md-4类可以将网页分为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值