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

已于 2024-04-12 20:15:40 修改
阅读量1.1k 收藏 23
点赞数 33
文章标签： 前端 javascript 开发语言
于 2024-04-12 00:14:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51562484/article/details/137646534
版权

内容回顾：

jQuery 操作DOM

jQuery 事件处理

Ajax

jQuery 特效案例

        全选效果

        tab切换

        下拉菜单

        自定义动画

Bootstrap

入门

首先我们可以在bootstrap官网上进行下载。官网地址:https//www.bootcss.com/

首先在我们的页面中导入bootstrap的样式，我们可以使用离线的，也可以使用在线的，推荐使用在线的。

然后在页面中添加viewport视口。

最后在页面 写我们的布局。

布局

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

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

<!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>

    <!-- CSS -->

    <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">

    <style>

        .row > div {

            border: 1px solid #243A64;

            background: #317FE5;

            text-align: center;

            color: white;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col">1-1</div>

        <div class="col">1-2</div>

        <div class="col">1-3</div>

        <div class="col">1-4</div>

        <div class="col">1-5</div>

        <div class="col">1-6</div>

        <div class="col">1-7</div>

        <div class="col">1-8</div>

        <div class="col">1-9</div>

        <div class="col">1-10</div>

        <div class="col">1-11</div>

        <div class="col">1-12</div>

    </div>

    <div class="row">

        <div class="col">2-1</div>

        <div class="col">2-2</div>

    </div>

    <div class="row">

        <div class="col">3-1</div>

        <div class="col">3-2</div>

        <div class="col">3-3</div>

    </div>

    <div class="row">

        <div class="col-5">4-1</div>

        <div class="col-3">4-2</div>

        <div class="col-4">4-3</div>

    </div>

    <div class="row">

        <div class="col align-self-start">5-1</div>

        <div class="col align-self-center">5-2</div>

        <div class="col align-self-end">5-3</div>

    </div>

</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">

    <style>

        .row > div {

            border: 1px solid #243A64;

            background: #317FE5;

            text-align: center;

            color: white;

        }

    </style>

</head>

<body>

<div class="container">

    <h1>h1. Bootstrap heading</h1>

    <h2>h2. Bootstrap heading</h2>

    <h3>h3. Bootstrap heading</h3>

    <h4>h4. Bootstrap heading</h4>

    <h5>h5. Bootstrap heading</h5>

    <h6>h6. Bootstrap heading</h6>

    <h3>

        Fancy display heading

        <small class="text-muted">With faded secondary text</small>

    </h3>

    <p class="lead">

        This is a lead paragraph. It stands out from regular paragraphs.

    </p>

    <p><abbr title="attribute">attr</abbr></p>

    <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

</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-sm table-bordered table-striped table-hover">

        <thead class="thead-dark">

        <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>

</div>

</body>

</html>

画像

通过Bootstrap的画像(figure)组件来显示相关联的图片和文本。本文档包含了画像（figure）组件的说明和示例。

任何时候需要显示一段内容（例如带有可选标题的图片），请使用<figure>标签。

.figure、.figure-img和.figure-caption类为HTML5的<figure>和<figcaption>元素提供了一些基本样式。<figure>标签内所含的图片如果没有明确地设置尺寸的话，请务必为<img>标签添加.img-fluid类，使其支持响应式布局。

你我的怡宝乐
关注
  • 33
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端三剑客 —— JavaScript （第十节）
weixin_51562484的博客
04-11 663
前端三剑客 —— JavaScript （第十节） jQuery 基础
前端三剑客 —— JavaScript （第九节）
weixin_51562484的博客
04-11 929
前端三剑客 —— JavaScript （第九节） Ajax 、jQuery 基础
前端三剑客 —— JavaScript （第四节）
weixin_51562484的博客
04-08 1062
前端三剑客 —— JavaScript （第四节）
【前端三剑客——JS】js基础理解
2401_84419493的博客
05-01 471
由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而是需要进行变量的数据类型转换。| prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |声明a为空值 | null |
前端三剑客——HTML5+CSS3+JavaScript
贝西奇谈
01-04 1025
《前端三剑客——HTML5+CSS3+JavaScript》采用“核心技术→实战训练营→企业级项目实践”的结构和“由浅入深，由深到精”的模式进行讲解。
【前端三剑客——JS，vue前端开发
2301_76225520的博客
04-02 267
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
web前端基础——第一章
ZiminLi的博客
10-19 2212
web前端基础
W3C三剑客——JavaScript基础快速入门（一）基本语法结构
weixin_44064134的博客
08-08 584
1.JavaScript历史故事 1990年底，欧洲核能研究组织（CERN）科学家 Tim Berners-Lee，在全世界最大的电脑网络——互联网的基础上，发明了万维网（World Wide Web），从此可以在网上浏览网页文件。最早的网页只能在操作系统的终端里浏览，也就是说只能使用命令行操作，网页都是在字符窗口中显示，这当然非常不方便。 1994年10月，NCSA 的一个主要程序员 Marc Andreessen 联合风险投资家 Jim Clark，成立了 Mosaic 通信公司（Mosaic Comm
【前端三剑客三】JavaScript手术刀剖析第一篇
weixin_46913665的博客
04-26 896
文章目录一、初始JavaScript1.JavaScript是什么2.JavaScript 、 HTML 、 CSS 之间的关系3.JavaScript 运行过程4.JavaScript 的组成二、JavaScript的用法1.第一个程序2.JavaScript 的书写形式2.1.内嵌式2.2.行内式2.3.外部式3.JavaScript中常用几个东西3.1.注释3.2.输入: prompt3.3.输出: alert3.4.输出: console.log三、JavaScript的基本语法1.变量的使用1.1
javascript-2
02-19
JavaScript-2这个主题可能指的是JavaScript的某个特定版本或者一个学习路径的第二部分。在JavaScript的发展历程中，从最初的ECMAScript 3（ES3）到现在的ECMAScript 2022（ES12），每个新版本都带来了许多改进和新...
前端技术的发展流程？
weixin_66109360的博客
03-22 224
早期受制于浏览器以及技术、兼容性等问题，导致网页的显示效果非常的单一，几乎都是静态页，前端的工作也是非常简单，说是前端，其实只是一个模板工程师，编写页面模板，然后让后端负责渲染。执行上面的代码，我们惊讶地发现，改变JavaScript对象的状态，会导致DOM结构作出对应的变化！如果要让用户留在当前页面中，同时发出新的HTTP请求，就可以使用Ajax发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。于2016年9月正式发布。
javascript后面部分
Pwsifeng的博客
04-07 1050
day01-PHP语言 一、认识前后端 前端：用户可见的界面，数据展示在页面上给用户看到 后端：分为服务器端和数据库 服务器端：把前端要展示的数据存储到数据库中，前端需要时把数据库的数据再传递给前端 ​ （服务器端：我们学习php语言，php语言运行在apache服务器上） 数据库：一个存储数据的仓库（mysql），可以让后端进行数据的增删改查（mysql） 展示方面：前端之间看到，布局，图文，交互和特效。 ​ 后端没办法直接看到，数据存取，业务逻辑
什么是前端工程化？
热门推荐
GitChat
06-28 2万+
前端越来越复杂，前端面试的要求也越来越高。如何提升前端开发水平？如何应对前端面试？我在日常工作中前端的开发框架以 Vue 为主，使用 Webpack 解决接口 mock、代码检查、代码编译、构建、压缩、添加版本号、部署等全流程的工作。涉及到的技术点有 Vue、Vuex、ESlint、stylelint、mock、Webpack、Sass、PostCSS 等。对前端的要求相比几年前已经从单纯的 JavaScript、CSS 问题变成了更多以工程化为主的问题。
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 526
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
最新发布
qq_39969848的博客
09-09 690
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
weixin_52479803的博客
09-05 688
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
el-popover弹框自定义位置
weixin_47218354的博客
09-05 356
【代码】el-popover弹框自定义位置。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1033
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
前端三剑客：HTML、CSS与JS基础入门与实践
要成为一名合格的前端开发者，你需要掌握HTML的标签结构、CSS的样式设计以及JavaScript的逻辑控制。同时，熟悉相关的开发工具如VScode和利用快捷键，观看优质的教学视频，结合实践项目，将使你的前端技能更加扎实。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值