06--Bootstrap学习--bootstrapcss综合案例

最新推荐文章于 2023-06-25 16:31:42 发布
最新推荐文章于 2023-06-25 16:31:42 发布
阅读量251 收藏 1
点赞数 1
分类专栏： bootstrap 文章标签： boostrap综合案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42133396/article/details/102620124
版权

bootstrapcss综合案例

代码如下：

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .paddtop{
            padding-top: 10px;
        }
        .search-btn{
            float: left;
            border:1px solid #ffc900;
            width: 90px;
            height: 35px;
            background-color:#ffc900 ;
            text-align: center;
            line-height: 35px;
            margin-top: 15px;
        }

        .search-input{
            float: left;
            border:2px solid #ffc900;
            width: 400px;
            height: 35px;
            padding-left: 5px;
            margin-top: 15px;
        }
        .jx{
            border-bottom: 2px solid #ffc900;
            padding: 5px;
        }
	/* 	.left{width: 26%;}
		.right{width: 74%;} */
        .company{
            height: 40px;
            text-align: center;
            line-height:40px ;
            font-size: 8px;
        }
    </style>
</head>
<body>

   <!-- 1.页眉部分-->
   <header class="container-fluid">
       <div class="row">
           <img src="img/top_banner.jpg" class="img-responsive">
       </div>
       <div class="row paddtop">
           <div class="col-md-3">
               <img src="img/logo.png" class="img-responsive">
           </div>
           <div class="col-md-5">
               <input class="search-input" placeholder="请输入线路名称">
               <a class="search-btn" href="#">搜索</a>
           </div>
           <div class="col-md-4">
               <img src="img/hotel_tel.png" class="img-responsive">
           </div>

       </div>
       <!--导航栏-->
       <div class="row">
           <nav class="navbar navbar-default">
               <div class="container-fluid">
                   <!-- Brand and toggle get grouped for better mobile display -->
                   <div class="navbar-header">
                       <!-- 定义汉堡按钮 -->
                       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                       </button>
                       <a class="navbar-brand" href="#">首页</a>
                   </div>

                   <!-- Collect the nav links, forms, and other content for toggling -->
                   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                       <ul class="nav navbar-nav">
                           <li class="active"><a href="#">自由行 <span class="sr-only">(current)</span></a></li>
                           <li><a href="#">热门路线</a></li>
                           <li><a href="#">跟团游</a></li>
                           <li><a href="#">国内游</a></li>
                           <li><a href="#">周边游</a></li>
                           <li><a href="#">出国游</a></li>

                       </ul>
                   </div><!-- /.navbar-collapse -->
               </div><!-- /.container-fluid -->
           </nav>

       </div>

       <!--轮播图-->
       <div class="row">
           <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
               <!-- Indicators -->
               <ol class="carousel-indicators">
                   <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="2"></li>
               </ol>

               <!-- Wrapper for slides -->
               <div class="carousel-inner" role="listbox">
                   <div class="item active">
                       <img src="img/banner_1.jpg" alt="...">
                   </div>
                   <div class="item">
                       <img src="img/banner_2.jpg" alt="...">
                   </div>
                   <div class="item">
                       <img src="img/banner_3.jpg" alt="...">
                   </div>

               </div>

               <!-- Controls -->
               <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                   <span class="sr-only">Previous</span>
               </a>
               <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                   <span class="sr-only">Next</span>
               </a>
           </div>



       </div>

   </header>
   <!-- 2.主体部分-->
   <div class="container">
        <div class="row jx">
            <img src="img/icon_5.jpg">
            <span>百里半精选</span>
        </div>

       <div class="row paddtop">
           <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/jingxuan_01.jpg" alt="">
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <font color="red">&yen; 699</font>
                </div>
           </div>
           <div class="col-md-3">
               <div class="thumbnail">
                   <img src="img/jingxuan_02.jpg" alt="">
                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                   <font color="red">&yen; 699</font>
               </div>

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

               <div class="thumbnail">
                   <img src="img/jingxuan_03.jpg" alt="">
                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                   <font color="red">&yen; 699</font>
               </div>
           </div>
           <div class="col-md-3">

               <div class="thumbnail">
                   <img src="img/jingxuan_04.jpg" alt="">
                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                   <font color="red">&yen; 699</font>
               </div>
           </div>


       </div>
       <div class="row jx">
           <img src="img/icon_6.jpg">
           <span>国内游</span>
       </div>
       <div class="row paddtop">
           <div class="col-md-4 left">
               <img src="img/guonei_1.jpg">
           </div>
           <div class="col-md-8 right">
               <div class="row">
                   <div class="col-md-4">
                       <div class="thumbnail">
                           <img src="img/jingxuan_05.jpg" alt="">
                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                           <font color="red">&yen; 699</font>
                       </div>
                   </div>
                   <div class="col-md-4">
                       <div class="thumbnail">
                           <img src="img/jingxuan_06.jpg" alt="">
                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                           <font color="red">&yen; 699</font>
                       </div>

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

                       <div class="thumbnail">
                           <img src="img/jingxuan_01.jpg" alt="">
                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                           <font color="red">&yen; 699</font>
                       </div>
                   </div>

               </div>
               <div class="row">
                   <div class="col-md-4">
                       <div class="thumbnail">
                           <img src="img/jingxuan_02.jpg" alt="">
                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                           <font color="red">&yen; 699</font>
                       </div>
                   </div>
                   <div class="col-md-4">
                       <div class="thumbnail">
                           <img src="img/jingxuan_03.jpg" alt="">
                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                           <font color="red">&yen; 699</font>
                       </div>

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

                       <div class="thumbnail">
                           <img src="img/jingxuan_04.jpg" alt="">
                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                           <font color="red">&yen; 699</font>
                       </div>
                   </div>


               </div>

           </div>

       </div>
   </div>
   <!-- 3.页脚部分-->
   <footer class="container-fluid">
       <div class="row">
           <img src="img/footer_service.png" class="img-responsive">
       </div>
       <div class="row company">
           北京百里半网络技术有限公司 版权所有Copyright 2006-2018, All Rights Reserved 京ICP备18026820号
       </div>

   </footer>


</body>
</html>

 

猪哥哥呀
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap完整案例
12-04
里面包含Bootstrap示例----树形菜单，项目用表及初始化数据,Bootstrap技术文档.docx,各大组件的压缩包,测试数据,以及源码
前端学习笔记_bootstrap.txt
09-25
前端学习笔记_bootstrap，包括bootstrap介绍、栅格系统、全局CSS样式、综合案例
Bootstrap-综合案例-编写课程页面-主体内容
weixin_47295886的博客
07-25 261
左侧部分-左侧课程的介绍-也可以使用组件-巨幕。分成左右两列左侧课程的介绍右侧列表组。使用响应式布局的方式。
一个bootstrap.css的使用案例
AnalogElectronic的博客
01-30 222
参考网站https://v3.bootcss.com <!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-sc
【前端开发】bootstrap框架综合案例（3）
`雾博客
06-17 276
<!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框架综合案例（4）
`雾博客
06-17 401
<!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.c
全网超神bootstrap综合实战含源码
03-03
全网火爆的bootstrap综合实战，包含前台和后台项目，写代码，不枯燥！
web前端开发综合实例
06-10
响应式页面
asp.net基于三层模式精品课程在线学习答疑网站设计
最新发布
11-04
## 开发技术：基于MVC思想和三层设计模式，前台采用bootstrap响应式框架，后台div+css ##程序开发软件: Visual Studio 2010以上 数据库：sqlserver2005以上 ### 前台显示系统包括首页、课程信息、教师信息、获奖信息...
【前端开发】bootstrap框架综合案例（5）
`雾博客
06-17 904
<!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/
H5 CSS3 bootStrap 的 一些简单事例
11-27
H5 CSS3 bootStrap 的 一些简单事例，给大家学习提供一点参考
bootstrap案例35个常用案例
01-15
收集了35个实用的bootstrap案例，轮播，表单设计等
BootStrap项目案例
12-21
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的css前端框架，这是一个示例
bootstrap框架实例大全
10-16
包含bootstrap完整的组件参考实例,让你的网页开发更快速!
bootstrap案例
03-25
bootstrap案例 bootstrap案例
【前端开发】bootstrap框架综合案例（2）
`雾博客
06-17 538
<!DOCTYPE html> <html> <head> <title>Bootstrap 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.mi
[硬核] Bootstrap Blazor Table 综合演示例子
alex_zoucn的博客
01-15 2152
1.导入导出 2.分页功能 3.增删改查 4.批量删除 5.批量编辑(审核) 6.列排序与列搜索 7.顶部搜索实现所有列搜索 8.高级搜索实现多条件搜索 9.顶部与刷新与视图列 10.实现文本类型明细行 11.列的统计 12.隐藏列,时间日期列格式化 13.新窗口打开 14.随机数据 15.自由编辑 16.清空数据 17.模板下载
BootStrap案例
shi_jiaye的博客
06-25 453
BootStrap是已经写好的css样式 （1）下载BootStrap 解压后放在 static文件夹–>plugins(存放插件)–>bootstrap-3.4.1 （2）·使用 在页面上引入BootStrap 编写HTML时，按照BootStrap的规定来编写+自定制 开发版本(一般做网站使用这个) <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css" 生产版本 <l
（Bootstrap）案例学习
南淮北安的博客
02-29 529
文章目录一、分析页面二、页眉部分三、主体部分五、页脚部分 一、分析页面 整个页面分为三部分：页眉部分，主题部分，页脚部分 这里借用 Bootstrap 对 HTML案例 进行优化处理 二、页眉部分 可以看到这里共可分为四行，而且页眉部分采用未留白方式，百分百宽度 container-fluid <!-- 页眉部分--> <!-- header形式化阅读，相当于 div--&gt...
spring-cloud-starter-bootstrap依赖
08-20
spring-cloud-starter-bootstrap依赖是用于支持Spring Boot项目中的配置文件的。它可以帮助加载bootstrap.properties或bootstrap.yml配置文件。在SpringBoot 2.4.x版本之后，引入这个依赖是需要的。以下是两个示例依赖的引用内容： 1. 引用: ```xml <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-bootstrap</artifactId> <version>3.1.0</version> </dependency> ``` 2. 引用: ```xml <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-bootstrap</artifactId> <version>3.1.3</version> </dependency> ``` 通过引入spring-cloud-starter-bootstrap依赖，你可以使用bootstrap.properties或bootstrap.yml配置文件来配置你的Spring Boot项目。这个依赖对于使用Spring Cloud和Spring Boot的项目来说非常方便。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [spring-cloud-starter-bootstrap依赖的含义](https://blog.csdn.net/weixin_45433031/article/details/125302701)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [SpringBoot支持bootstrap.yml/bootstrap.properties配置文件，需要导入spring-cloud-starter-bootstrap依赖](https://blog.csdn.net/hkl_Forever/article/details/129352372)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值