前端三剑客 —— JavaScript （第十二节）

最新推荐文章于 2024-10-07 20:56:37 发布
最新推荐文章于 2024-10-07 20:56:37 发布
阅读量794 收藏 12
点赞数 19
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51562484/article/details/137693654
版权

目录

内容回顾：

Bootstrap

组件

警告框

按钮

卡片

轮播

表单

分页

内容回顾：

Bootstrap

官网地址:https//www.bootcss.com/

布局

在bootstrap中，需要使用.container样式来进行容器布局，在这个容器中采用的是栅格系统来布局。栅格系统采用的是行和列的方式来进行布局的。

.row 样式代代行，而 .col 样式代表列。而列中可以通过 .col-n 来指定这个单元格中多少列。

页面内容

        排版

        图片

        表格

        画像

Bootstrap

组件

警告框

按钮

卡片

轮播

<!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>bootstrap轮播</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

</head>

<body>

<div class="container">

    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators">

            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>

            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>

            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>

        </ol>

        <div class="carousel-inner">

            <div class="carousel-item active">

                <img src="./images/1.jpg" class="d-block w-100" alt="...">

                <div class="carousel-caption d-none d-md-block">

                    <h5>First slide label</h5>

                    <p>Some representative placeholder content for the first slide.</p>

                </div>

            </div>

            <div class="carousel-item">

                <img src="images/2.jpg" class="d-block w-100" alt="...">

                <div class="carousel-caption d-none d-md-block">

                    <h5>Second slide label</h5>

                    <p>Some representative placeholder content for the second slide.</p>

                </div>

            </div>

            <div class="carousel-item">

                <img src="images/3.jpg" class="d-block w-100" alt="...">

                <div class="carousel-caption d-none d-md-block">

                    <h5>Third slide label</h5>

                    <p>Some representative placeholder content for the third slide.</p>

                </div>

            </div>

        </div>

        <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">

            <span class="carousel-control-prev-icon" aria-hidden="true"></span>

            <span class="sr-only">Previous</span>

        </button>

        <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">

            <span class="carousel-control-next-icon" aria-hidden="true"></span>

            <span class="sr-only">Next</span>

        </button>

    </div>

</div>

<!-- jQuery and JavaScript Bundle with Popper -->

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

</body>

</html>

表单

<!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>bootstrap轮播</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

</head>

<body>

<div class="container">

    <form action="" method="post">

        <div class="form-group">

            <label for="exampleInputEmail1">Email address</label>

            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">

            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>

        </div>

        <div class="form-group">

            <label for="exampleInputPassword1">Password</label>

            <input type="password" class="form-control" id="exampleInputPassword1">

        </div>

        <div class="form-group form-check">

            <input type="checkbox" class="form-check-input" id="exampleCheck1">

            <label class="form-check-label" for="exampleCheck1">Check me out</label>

        </div>

        <div class="form-group">

            <label for="exampleFormControlTextarea1">Example textarea</label>

            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

        </div>

        <div class="form-group">

            <div class="form-check form-check-inline">

                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">

                <label class="form-check-label" for="inlineRadio1">1</label>

            </div>

            <div class="form-check form-check-inline">

                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">

                <label class="form-check-label" for="inlineRadio2">2</label>

            </div>

            <div class="form-check form-check-inline">

                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>

                <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>

            </div>

        </div>

        <button type="submit" class="btn btn-sm btn-primary">Submit</button>

        <button type="reset" class="btn btn-sm btn-secondary">Reset</button>

    </form>

</div>

</body>

</html>

分页

<!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>bootstrap分页</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

</head>

<body>

<div class="container">

    <table class="table table-dark">

        <thead>

        <tr>

            <th scope="col">#</th>

            <th scope="col">First</th>

            <th scope="col">Last</th>

            <th scope="col">Handle</th>

        </tr>

        </thead>

        <tbody>

        <tr>

            <th scope="row">1</th>

            <td>Mark</td>

            <td>Otto</td>

            <td>@mdo</td>

        </tr>

        <tr>

            <th scope="row">2</th>

            <td>Jacob</td>

            <td>Thornton</td>

            <td>@fat</td>

        </tr>

        <tr>

            <th scope="row">3</th>

            <td>Larry</td>

            <td>the Bird</td>

            <td>@twitter</td>

        </tr>

        </tbody>

    </table>

    <nav aria-label="Page navigation example">

        <ul class="pagination justify-content-end">

            <li class="page-item">

                <a class="page-link" href="#" aria-label="Previous">

                    <span aria-hidden="true">&laquo;</span>

                </a>

            </li>

            <li class="page-item"><a class="page-link" href="#">1</a></li>

            <li class="page-item active"><a class="page-link" href="#">2</a></li>

            <li class="page-item"><a class="page-link" href="#">3</a></li>

            <li class="page-item">

                <a class="page-link" href="#" aria-label="Next">

                    <span aria-hidden="true">&raquo;</span>

                </a>

            </li>

        </ul>

    </nav>

</div>

</body>

</html>

当前端三剑客 全部内容看完学会后，建议考W3C前端开发工程师证书以及可以寻找项目进行练手，把学会的东西落实落稳 ，融会贯通。

你我的怡宝乐
关注
前端三剑客 —— JavaScript （第十节）
weixin_51562484的博客
04-11 666
前端三剑客 —— JavaScript （第十节） jQuery 基础
前端三剑客 —— JavaScript （第十一节）
weixin_51562484的博客
04-12 1108
前端三剑客 —— JavaScript （第十一节） Bootstrap 基础
前端三剑客 —— JavaScript （第九节）
weixin_51562484的博客
04-11 932
前端三剑客 —— JavaScript （第九节） Ajax 、jQuery 基础
前端三剑客 —— JavaScript （第七节）
weixin_51562484的博客
04-10 760
前端三剑客 —— JavaScript （第六节）
【前端三剑客——JS】js基础理解
2401_84419493的博客
05-01 479
由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而是需要进行变量的数据类型转换。| prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |声明a为空值 | null |
前端三剑客 HTML、CSS、JavaScript 入门到上手
weixin_46448719的博客
05-01 1万+
HTML、CSS、JavaScript 基本语法大全，教你从入门到上手
前端三剑客——HTML5+CSS3+JavaScript
贝西奇谈
01-04 1045
《前端三剑客——HTML5+CSS3+JavaScript》采用“核心技术→实战训练营→企业级项目实践”的结构和“由浅入深，由深到精”的模式进行讲解。
【前端三剑客——JS，vue前端开发
2301_76225520的博客
04-02 271
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
前端三剑客之 JavaScript
ryy1999的博客
06-01 936
这个类型的变量，是 JS 的一种特殊情况。undefined 这个类型，就只有 undefined 这一个值。我们再来看看 null 空值类型。另外，空值也有一些特殊情况。DOM 全称为 Document Object Model.W3C 标准给我们提供了一系列的函数, 让我们可以操作:网页内容网页结构网页样式。
javascript-2
02-19
JavaScript-2这个主题可能指的是JavaScript的某个特定版本或者一个学习路径的第二部分。在JavaScript的发展历程中，从最初的ECMAScript 3（ES3）到现在的ECMAScript 2022（ES12），每个新版本都带来了许多改进和新...
前端技术的发展流程？
weixin_66109360的博客
03-22 241
早期受制于浏览器以及技术、兼容性等问题，导致网页的显示效果非常的单一，几乎都是静态页，前端的工作也是非常简单，说是前端，其实只是一个模板工程师，编写页面模板，然后让后端负责渲染。执行上面的代码，我们惊讶地发现，改变JavaScript对象的状态，会导致DOM结构作出对应的变化！如果要让用户留在当前页面中，同时发出新的HTTP请求，就可以使用Ajax发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。于2016年9月正式发布。
javascript后面部分
Pwsifeng的博客
04-07 1079
day01-PHP语言 一、认识前后端 前端：用户可见的界面，数据展示在页面上给用户看到 后端：分为服务器端和数据库 服务器端：把前端要展示的数据存储到数据库中，前端需要时把数据库的数据再传递给前端 ​ （服务器端：我们学习php语言，php语言运行在apache服务器上） 数据库：一个存储数据的仓库（mysql），可以让后端进行数据的增删改查（mysql） 展示方面：前端之间看到，布局，图文，交互和特效。 ​ 后端没办法直接看到，数据存取，业务逻辑
什么是前端工程化？
热门推荐
GitChat
06-28 2万+
前端越来越复杂，前端面试的要求也越来越高。如何提升前端开发水平？如何应对前端面试？我在日常工作中前端的开发框架以 Vue 为主，使用 Webpack 解决接口 mock、代码检查、代码编译、构建、压缩、添加版本号、部署等全流程的工作。涉及到的技术点有 Vue、Vuex、ESlint、stylelint、mock、Webpack、Sass、PostCSS 等。对前端的要求相比几年前已经从单纯的 JavaScript、CSS 问题变成了更多以工程化为主的问题。
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1125
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
前端的全栈混合之路Meteor篇（四）：支持自定义对象序列化的EJSON介绍
最新发布
分享有趣的、贴近生活的CS知识
10-07 616
在Meteor框架中，EJSON（Extended JSON）是一个扩展了标准JSON的库，旨在支持更多的数据类型。标准JSON仅支持字符串、数字、布尔值、数组和对象等基本数据类型，而EJSON允许开发者在Meteor应用中传输更复杂的数据类型，例如DateBinary数据，甚至是自定义对象，这使得Meteor在客户端和服务器之间传递复杂数据变得更加便捷和高效。
Vue根实例、实例总结
m0_54007573的博客
10-04 506
Vue根实例、实例总结
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1218
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
登录功能开发 P167重点
2303_81204446的博客
09-30 432
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值