AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Javascript知识【BootStrap】

2023-10-19 73
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Javascript知识【BootStrap】

BootStrap


概述及导入

目标：


1，知道什么是响应式开发


2，知道如何搭建bootStrap环境


为了进行敏捷开发，为了更快搭建页面，为了让书写的网页可以在各个终端进行展示

8e0f0605c7664f548eb5a54fde151dbf.png


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <button type="button" class="btn btn-primary">（首选项）Primary</button>
</body>
</html>


BootStrap前置知识（了解）

3eaae0151977489bb8104a6a083cfbe7.png

d6c9f7b4dd3b4febbcfad5b624c31d15.png

be0af0cdf33d4892b4e16e7fe2253f8a.png


BootStrap布局容器及栅格【阶段重点】


布局容器

目标：可以掌握BootStrap中布局系统


BootStrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。相当于一个画板。


帮助手册位置：全局CSS样式-------》概览--------》布局容器

372e3c4d872d4c1c8cd4adb4a98c3df1.png

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:2px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        要求：居中，两端有留白
    </div>
    <div class="container-fluid">
        要求：占据视口100%宽度
    </div>
</body>
</html>


布局容器：相当于BootStrap的一个画板，所有的bootStrap组件都建议放置于此。


BootStrap操作时，就是使用class进行赋值，就可以引入BootStrap样式。


栅格（核心）

177597daf61640829e50646ac5b51a39.png


ea95fa389517490e9655ad89d2a1566b.png

624c465903de47cba2ba24e710d42c17.png


栅格是通过数格子来完成一行的布局的。


col-lg-? 在这一行占用?列


col-lg-? 书写顺序决定在这一行的占用位置


示例1：

3125e94b038e4b8ea4bb054af88bfcd6.png

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:1px solid red;
            height:100px;
        }
    </style>
</head>
<body>
    <!--要求：一个元素占一行-->
    <div class="container">
        <div class="row">
            <div class="col-lg-12" style="border: 1px solid blue;">
                11111111111111
            </div>
        </div>
    </div>
</body>
</html>

示例2：

4b8c802952664a8fbf3132ad53b5d8cd.png

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:1px solid red;
            height:100px;
        }
    </style>
</head>
<body>
    <!--要求：三个元素平分一行-->
    <div class="container">
        <div class="row">
            <div class="col-lg-4" style="border: 1px solid blue;">
                11111111111111
            </div>
            <div class="col-lg-4" style="border: 1px solid blue;">
                22222222222222
            </div>
            <div class="col-lg-4" style="border: 1px solid blue;">
                33333333333333
            </div>
        </div>
    </div>
</body>
</html>

f42eaa8bfe39490d8578fec90bd532a4.png

b3c2c5703f804a4cb225accc9880f14d.png

e3524d04a22041a89d5b78edcbb36f82.png

3873e160ee8d4e03bb8b3e476bcf4787.png

edc0223b55104b68834af7799c77911c.png

22513ee9ddd24e6e90b52d615d8c3670.png


改变视口，就相当于改变屏幕尺寸就会在 四个屏幕尺寸之间切换。

c1e8dd56399d4a2c8be2f58528045cb7.png

d7e6056ed3c4445bb887a5dbc2e80a0b.png

若需要设置一个尺寸，同步其他屏幕，就需要设置xs


若需要设置一个尺寸，不影响其他屏幕，就需要设置lg

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:1px solid red;
            height:100px;
        }
    </style>
</head>
<body>
    <!--要求：三个元素平分一行，各个尺寸下 lg md sm xs-->
    <div class="container">
        <div class="row">
            <div class="col-xs-4" style="border: 1px solid blue;">
                11111111111111
            </div>
            <div class="col-xs-4" style="border: 1px solid blue;">
                22222222222222
            </div>
            <div class="col-xs-4" style="border: 1px solid blue;">
                33333333333333
            </div>
        </div>
    </div>
</body>
</html>

71f8ad26d9624dce84422ef334572b87.png


答案：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            11
        </div>
        <div class="col-md-6">
            22
        </div>
    </div>
</div>

2d8dd61b85354d31ac3801ba4f231726 (1).png

f2406e122e2947119dedf205db1543a8.png

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:1px solid red;
            height:100px;
        }
    </style>
</head>
<body>
    <!--要求：元素居中展示
    -->
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-xs-offset-4">111111</div>
        </div>
    </div>
</body>
</html>

BootStrap响应式工具及列表

目标：通过学习响应式工具，熟练使用不同屏幕尺寸下，元素显示和隐藏效果


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        div{
            border:1px solid red;
            height:100px;
        }
    </style>
</head>
<body>
    <!--要求：中间元素在大尺寸屏幕可见
    -->
    <div class="container">
        <div class="row">
            <div class="col-xs-4">111111</div>
            <div class="col-xs-4 visible-lg">222222</div>
            <div class="col-xs-4">333333</div>
        </div>
    </div>
</body>
</html>


<ul class="list-inline">
    <li>爱</li>
    <li>吃</li>
    <li>土</li>
    <li>豆</li>
</ul>
文章标签：
前端开发
JavaScript
容器
敏捷开发
关键词：
JavaScript Bootstrap
爱吃豆的土豆
目录
相关文章
冷水鱼。
|
8月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
冷水鱼。
144 0
汪末末
|
前端开发 JavaScript 容器
Bootstrap JavaScript插件：按钮 (button.js)
Bootstrap 框架
汪末末
185 0
Bootstrap JavaScript插件：按钮 (button.js)
汪末末
|
前端开发 JavaScript
Bootstrap JavaScript插件：警告信息 (alert.js)
Bootstrap 框架
汪末末
168 0
Bootstrap JavaScript插件：警告信息 (alert.js)
汪末末
|
存储 前端开发 JavaScript
Bootstrap JavaScript插件：工具提示（tooltip.js）
Bootstrap 框架
汪末末
236 0
Bootstrap JavaScript插件：工具提示（tooltip.js）
汪末末
|
前端开发 JavaScript 容器
Bootstrap JavaScript插件：可切换标签 (tab.js)
Bootstrap 框架
汪末末
120 0
Bootstrap JavaScript插件：可切换标签 (tab.js)
Zh.晨光
|
8月前
|
机器学习/深度学习 前端开发 JavaScript
源映射错误：Error: request failed with status 404 源 URL：http://localhost:8080/bootstrap/js/axios-0.18.0.js
源映射错误：Error: request failed with status 404 源 URL：http://localhost:8080/bootstrap/js/axios-0.18.0.js
Zh.晨光
156 0
源映射错误：Error: request failed with status 404 源 URL：http://localhost:8080/bootstrap/js/axios-0.18.0.js
土木林森
|
5月前
|
存储 JavaScript 前端开发
【Vue.js的神秘力量】一键解锁：如何让Bootstrap和Vuex成为你的开发超能力？
【8月更文挑战第30天】Vue.js是一个轻量且灵活的JavaScript框架，易于上手且功能强大。为提高开发效率和应用交互性，常需集成第三方库。本文介绍如何在Vue.js项目中集成Bootstrap和Vuex，及其它常见第三方库。Bootstrap提供响应式设计和预制组件，通过安装插件和引入CSS/JS即可集成；Vuex作为官方状态管理库，通过安装并创建store来管理组件状态。此外，Vue.js还可轻松集成Axios和Vue Router等库，提升HTTP请求和页面路由功能。合理选择和集成第三方库能显著提升开发效率，但需保持代码可维护性和可读性。
土木林森
42 0
土木林森
|
5月前
|
前端开发 JavaScript 开发者
Vue.js 与第三方库的神秘融合：Bootstrap、Vuex 等究竟带来何种惊喜？
【8月更文挑战第30天】Vue.js 作为一款流行的前端框架，凭借其强大的功能和易用性深受开发者喜爱。它不仅能独立运作，还能无缝集成各种第三方库，显著提升开发效率。例如，通过 `vue-bootstrap`，我们可以轻松引入 Bootstrap 的响应式组件，快速打造美观的用户界面；借助 Vuex，Vue 提供的状态管理方案，能有效解决复杂应用中的状态共享难题。此外，诸如 `axios` 和 `moment` 等库也能进一步增强 Vue 的功能，使其成为构建高性能前端应用的理想选择。
土木林森
51 0
土木林森
|
5月前
|
设计模式 JavaScript 前端开发
Vue.js 与第三方库的奇妙融合，Bootstrap 和 Vuex 究竟能带来何种意想不到的变革？
【8月更文挑战第30天】在现代Web开发中，结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如，工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件；单例模式则通过全局事件总线`eventBus`实现跨组件通信；策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和可维护性，还使得Vue应用更加模块化和灵活。
土木林森
24 0
汪末末
|
前端开发 JavaScript 索引
Bootstrap JavaScript插件：轮播插件 (carousel.js)
Bootstrap 框架
汪末末
292 0
Bootstrap JavaScript插件：轮播插件 (carousel.js)

热门文章

最新文章

  • 1
    Midscene.js：AI 驱动的 UI 自动化测试框架，支持自然语言交互，生成可视化报告
  • 2
    一个好看的小时钟html+js+css源码
  • 3
    如何使用Selenium处理JavaScript动态加载的内容？
  • 4
    带方向感知功能的js图片遮罩层插件
  • 5
    折腾之王：JavaScript之父Brave浏览器与BAT的诞生
  • 6
    Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式
  • 7
    页面滚动触发css3动画js插件
  • 8
    npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
  • 9
    捕获键盘输入和输入组合键的js库hotkeys
  • 10
    Node.js导入MongoDB具体操作指南
  • 1
    阿里云云效操作报错合集之遇到Node.js的内存溢出问题，该怎么办
    161
  • 2
    阿里云云效操作报错合集之Node.js构建报错，该如何排查问题
    146
  • 3
    Nest.js 实战 (三)：使用 Swagger 优雅地生成 API 文档
    172
  • 4
    Next.js静态出口生成策略深度解析
    110
  • 5
    Node.js搭建REST API实战：从基础到部署
    99
  • 6
    前端如何学习Node.js及Node.js的主要用途
    109
  • 7
    Vue.js组件通信策略详解
    68
  • 8
    网络爬虫开发：JavaScript与Python特性的小差异
    72
  • 9
    Nest.js 实战 (二)：如何使用 Prisma 和连接 PostgreSQL 数据库
    264
  • 10
    JavaScript 使用axios库发送 post请求给后端， 给定base64格式的字符串数据和一些其他参数， 使用表单方式提交， 并使用onUploadProgress显示进度
    531

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 前端开发框架Bootstrap使用教程
  • Vue.js 入门与实战
  • HTML5 新特性教程
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    阿里云开通OSS存储服务详细流程