【前端开发】bootstrap框架综合案例（4）

已于 2023-10-04 00:40:05 修改
阅读量415 收藏 3
点赞数
分类专栏： 1+Xweb前端考证 文档解析 前端开发 文章标签： bootstrap 前端 html
于 2021-06-17 11:07:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48348920/article/details/117985929
版权 
<!DOCTYPE html>
<html>

<head>
    <title>前端开发笔记</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 在（1）处补齐代码，填写固定宽度的容器类 -->
    <div class="contaier">
        <h2>myblog-前端开发人员的笔记</h2>
        <br>
        <!-- 在（2）处补齐代码，填写导航类，在（3）处填写胶囊导航类，在（4）处填写导航选项卡列表 -->
        <ul class="navbar nav-pills" role="tablist">
            <li class="nav-item">
                <!-- 在（5）处填写当前激活类 -->
                <a class="nav-link active" data-toggle="pill" href="#home">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#menu1">产品</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#menu2">博客</a>
            </li>
        </ul>

        <!-- 在（6）处填写导航具体内容 -->
        <div class="tab-content">
            <!-- 在（7）处根据选项列表分析具体id填写在此处 -->
            <div id="home" class="container tab-pane active"><br>
                <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                <p> Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。</p>
                <!-- 首页轮播 -->
                <!-- 在（8）处填写轮播图类 -->
                <div id="demo" class="carousel slide" data-ride="carousel">
                    <!-- 在（9）处填写轮播图指示符类 -->
                    <ul class="carousel-indicators">
                        <li data-target="#demo" data-slide-to="0" class="active"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="2"></li>
                    </ul>

                    <!-- 在（10）处填写包裹轮播图片类 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="./img/img_fjords_wide.jpg">
                        </div>
                        <div class="carousel-item">
                            <img src="./img/img_mountains_wide.jpg">
                        </div>
                        <div class="carousel-item">
                            <img src="./img/img_nature_wide.jpg">
                        </div>
                    </div>
                    <!-- 在（11）（12）处填写左右切换按钮类 -->
                    <a class="carousel-control-prev" href="#demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
                <!-- 轮播结束 -->
            </div>
            <div id="menu1" class="container tab-pane fade"><br>
                <p>请认真填写问卷，您的意见将帮助我们改进产品.</p>
                <div>
                    <form>
                        <!-- 在（13）处填写表单控件组类 -->
                        <div class="form-group">
                            <label for="usr">用户名:</label>
                            <!-- 在（14）处填写表单控件类 -->
                            <input type="text" class="form-control" id="usr">
                        </div>
                        <p>请选择您购买的型号：</p>
                        <!-- 在（15）处填写表单多选框类 -->
                        <div class="form-check">
                            <label class="form-check-label">
                <!-- 在（16）处填写多选框 -->
                <input type="checkbox" class="form-check-input" value="">产品1
              </label>
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                <input type="checkbox" class="form-check-input" value="">产品2
              </label>
                        </div>
                        <!-- 在（17）处填写禁用类 -->
                        <div class="form-check disabled">
                            <label class="form-check-label">
                <input type="checkbox" class="form-check-input" value="" disabled>产品3
              </label>
                        </div>
                        <div class="form-group">
                            <!-- 在（18）处填写相关id -->
                            <label for="comment">评论:</label>
                            <textarea class="form-control" rows="5" id="comment"></textarea>
                        </div>
                        <div>
                            <!-- 在（19）处填写提交按钮 -->
                            <input type="submit" value="提交">
                        </div>
                    </form>
                </div>
            </div>
            <!-- 在（20）处填写淡入淡出效果 -->
            <div id="menu2" class="container tab-pane fade"><br>
                <p>Bootstrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。</p>
            </div>
        </div>
    </div>
</body>

</html>
一殊酒
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端案例---Bootstrap框架
weixin_44479992的博客
12-03 335
前端案例—Bootstrap框架 页眉部分 将页眉分四行来分析 <!-- 1.页眉部分--> <header class="container-fluid"> <div class="row"> <img src="img/1.jpg" class="img-responsive"/> ...
Bootstrap【前端开发框架三】
m0_64522859的博客
05-04 246
如需温习上一节内容，请点击下方链接进行跳转： Bootstrap----02_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转：Bootstrap01【前端开发框架】_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转。JavaWEB之AJAX快速入门_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转。JavaWEB之MVC购物车_云彩123的博客-CSDN博客1.引入问题1：先有servlet还是先有jsp？先有servletweb发
BootStrap项目案例
12-21
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的css前端框架，这是一个示例
【前端开发】bootstrap框架综合案例（5）
`雾博客
06-17 1000
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 导入css文件夹中bootstrap.min.css基础样式文件 --> <link rel="stylesheet" type="text/
Bootstrap常用元素
lynch0571的专栏
09-14 1711
Theme Template for Bootstrap Navbars Toggle navigation
【前端开发】bootstrap框架综合案例（3）
`雾博客
06-17 320
<!DOCTYPE html> <html> <head> <title>第一题--bootstrap</title> <meta charset="utf-8"> <!-- （1）设置 viewport meta 标签 --> <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fi
Bootstrap完整案例
12-04
里面包含Bootstrap示例----树形菜单，项目用表及初始化数据,Bootstrap技术文档.docx,各大组件的压缩包,测试数据,以及源码
前端开发框架bootstrap3教程
05-25
《前端开发框架bootstrap3教程》将介绍Bootstrap3的基本概念和使用方法，包括网格系统、表单、导航、按钮、图标等常用组件的使用。通过学习本教程，您将能够掌握Bootstrap3的核心技术，为您的Web开发工作提供便利和...
1-4_前端框架BootStrap.pdf
01-19
Bootstrap 是一个基于 HTML、CSS 和 JavaScript 的开源前端框架，由 Twitter 公司的 Mark Otto 和 Jacob Thornton 开发。Bootstrap 提供了一整套的 UI 组件、布局系统、响应式设计等功能，可以帮助开发者快速构建...
Bootstrap(前端开发框架)
qq_64001795的博客
05-07 8379
目录 前端框架的理解 一、3个WWW 1、what？是什么 2、why？为什么使用 3、where？使用领域 二、环境安装 1、下载Bootstrap库 2、页面中引入库 三、案例 以网上书城为例 案例1：查询按钮原生态实现对比Bootstrap方式实现 案例2：演示Bootstrap页面在手机浏览器中展示效果 案例3：首页导航&搜索区域原生态实现（div+css） 案例4：首页导航&搜索区域Bootstrap实现&搭首页框架 前端框架的理解...
bootstrap框架实例大全
10-16
包含bootstrap完整的组件参考实例,让你的网页开发更快速!
bootstrap案例
03-25
bootstrap案例 bootstrap案例
bootstrap案例35个常用案例
01-15
收集了35个实用的bootstrap案例，轮播，表单设计等
Bootstrap前端开发案例一
09-02
Bootstrap是一款由Twitter公司开发并开源的前端框架，它极大地简化了网页前端的开发流程，尤其在响应式设计和移动优先的开发策略上表现卓越。Bootstrap提供了丰富的预定义样式、组件和JavaScript插件，使得开发者...
前端开发案例：bootstrap前端样式经典案例
最新发布
05-28
这个"前端开发案例：bootstrap前端样式经典案例"显然包含了使用Bootstrap构建的一些示例页面和设计模式，旨在帮助开发者更好地理解和应用Bootstrap的特性。 Bootstrap的核心特点包括其易于使用的预定义类、组件和...
Bootstrap-综合案例-编写课程页面-主体内容
weixin_47295886的博客
07-25 307
左侧部分-左侧课程的介绍-也可以使用组件-巨幕。分成左右两列左侧课程的介绍右侧列表组。使用响应式布局的方式。
【前端开发】bootstrap框架综合案例（1）
`雾博客
06-17 939
<!DOCTYPE html> <html> <head> <title>callio</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" type="tex
【无标题】
weixin_63944861的博客
04-01 454
目录 准备工作 一、案例1：首页轮播图实现 主要用于组件：轮播-Carousel 二、案例2：首页书籍分类实现 主要用于组件：列表组-List group ​ 三、案例3：首页新书上架&热门书籍实现 页面内容需要：画像-Figure 四、案例4：首页整合 1、完善轮播图（左右箭头 指示灯样式） 2、完善新书上架&热门书籍 五、案例5：实现登录&注册页面 主要用于组件：表单-Forms 准备工作：页面中引入库 ① bootstrap.min.cs..
前端使用bootstrap实现一个简单的小案例，重点是关注响应式布局
qq_43064077的博客
11-24 5179
1.案例的效果展示 我们使用的是响应式布局，所谓的响应式布局就是可以使得同一套页面可以兼容不同分辨率的设备。可以看到苹果的官网当你将浏览器的串口放的很小的时候网站的布局也会随这页面大小发生变化，当我们在手机或者pad上面去访问网站的时候还是会有一个不错的体验的。 当浏览器的页面变小以后首先可以看到的就是，导航栏进行了折叠，还有就是这些图片也还是可以完全显示出来的，这就是响应式布局一个明显的效果 2 主要的知识点 之前我做这个网页的时候使用的是table里面嵌套table，虽然可以实现效果但是，没有使用
Bootstrap前端框架开发学习指南
课程旨在教授学生快速开发Web应用程序和网站的前端框架Bootstrap，通过实例教学使学生掌握其基础和应用技能，旨在提升学生的动手实践能力，实现与工作岗位的无缝对接。课程内容围绕真实项目开发流程，采用创新的教学...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值