曹鲁丹bootstrap

于 2022-04-17 20:33:36 发布
阅读量135 收藏
点赞数
文章标签： bootstrap html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59317372/article/details/124235817
版权

GEMINITECH 解决方案 移动H5 合作伙伴 品牌形象
关键词由CSDN通过智能技术生成 
.navbar-brand{
	padding:10px 20px;
}
.jumbotron{
	background: url(../img/bg.jpg)center center no-repeat;
	padding-bottom: 0;
	padding-top: 10px;
}
.navbar{
	margin-bottom: 0;
}
.jumbotron h2{
	color: #BCE8F1;
}
.bg-danger{
	background-color: #DDDDDD;
}
.bg-danger .col-md-8{
	text-align: center;
}
.bg-danger H2{
	color: #5CB85C;
}
.bg-danger .list-item{
	background: url(../img/icons.png) left top no-repeat;
	height: 112px;
	padding-left: 138px;
	margin-bottom: 39px;
}
.bg-danger .item2{
	background-position: left -112px;
}
.bg-danger .item3{
	background-position: left -224px;
}
.bg-danger .item4{
	background-position: left -336px;
}
.bg-danger .item5{
	background-position: left -448px;
}
.bg-danger .list-item:nth-of-type(6){
	background-position: left -560px;
}
.case-list{
	margin-top:75px;
}
.case-list img{
	width:100%;
}
.case-list .col-lg-3{
	padding:0px;
	position: relative;
}
@media(max-width: 500px) {
	.case-list .col-xs-6{
		width:100%;
	}
}
.case-list .col-lg-3 .mask{
	position: absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color: #b5cd42;
	color:#fff;
	padding:10px;
	display: none;
}
.case-list .col-lg-3:hover .mask{
	display: block;
}
/* 200px 180px */

.blue-bg{
	background-color: #2c8fba;
	margin-top:75px;
}
.blue-bg .common-title{
	color:#fff;
}
.blue-bg .common-detail{
	color:#fff;
}
.logo-list a{
	display: block;
	width:200px;
	height:180px;
	background: url(../img/logos.png) left top no-repeat;
	margin: 0 auto;
}
.logo-list .logo1{
	background-position: left -180px;
}
.logo-list .logo2{
	background-position: left -360px;
}
.logo-list .logo3{
	background-position: left -540px;
}
.logo-list .logo4{
	background-position: left -720px;
}
.logo-list .col-lg-2{
	width:20%;
}
.gray-bg{
	background-color: #f2f2f2;
}
.links-list{
	margin-top: 72px;
	margin-bottom: 72px;
}
.links-list dt{
	font-size: 20px;
	color:#191919;
	line-height: 1;
	margin-bottom: 10px;
}
.links-list dd{
	line-height: 30px;
}
.links-list dd a{
	color:#a0a0a0;
}

.dark-bg{
	background-color: #2e2e2e;
	border-top: 5px solid #2994bf;
}
.footer{
	min-height:82px;
}
.footer .text-left{
	color:#fff;
	line-height:82px;
}
.footer .text-right{
	line-height:82px;
}
.footer .text-right a{
	color:#fff;
	padding-left:10px;
}
@media(max-width:769px){
	.footer .text-left{
		line-height:60px;
	}
	.footer .text-right{
		text-align: left;
		line-height:20px;
		margin-bottom: 15px;
	}
	.footer .text-right a{
		padding-left:0px;
		padding-right:10px;
	}
}

<!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 101 Template</title>

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

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
    <nav class="navbar navbar-inverse">
  <div class="container">
    <!-- 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="#"><img src="img/logo.png"></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>
        
      </ul>
      <form class="navbar-form navbar-right">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="搜索">
           <span class="input-group-btn">
			   <button type="submit" class="btn btn-default">
				   <span class="glyphicon glyphicon-search"></span>
				</button>
			</span>
        </div>
       
      </form>
     
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

		<div class="jumbotron">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-10 col-md-offset-2">
								<h2>公司简介</h2>
						<p>GEMINITECH有限公司， 我们作为创新型科技企业，拥有一个充满朝气，
						高素质、年轻化、专业化的开发团队， 为公司蓬勃发展提供源</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-6 hidden-sm hodden-xs">
					<img src="img/person.png">
				</div>
			</div>
		</div>
		</div>
		
		<div class="container-fluid bg-danger">
			<div class="container">
				<div class="row">
					<div class="col-md-8 col-md-offset-2">
						<h2>解决方案</h2>
						<p>主要从事主要从事</p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4 list-item">
						<h4>网站建设</h4>
						<p>网站建设网站建设网站建设网站建设网站建设网站建设</p>
					</div>
					<div class="col-md-4 list-item item2">
						<h4>网站建设</h4>
						<p>网站建设网站建设网站建设网站建设网站建设网站建设</p>
					</div>
					<div class="col-md-4 list-item item3">
						<h4>网站建设</h4>
						<p>网站建设网站建设网站建设网站建设网站建设网站建设</p>
					</div>
					<div class="col-md-4 list-item item4">
						<h4>网站建设</h4>
						<p>网站建设网站建设网站建设网站建设网站建设网站建设</p>
					</div>
					<div class="col-md-4 list-item item5">
						<h4>网站建设</h4>
						<p>网站建设网站建设网站建设网站建设网站建设网站建设</p>
					</div>
					<div class="col-md-4 list-item item6">
						<h4>网站建设</h4>
						<p>网站建设网站建设网站建设网站建设网站建设网站建设</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="container-fluid">
			<div class="container">
				<h2 class="common-title text-center">成功案例</h2>
				<div class="row">
					<div class="col-md-8 col-md-offset-2 text-center">
						以HTML5技术为基础，实现移动终端自动兼容与浏览，延伸品牌和用户之间的触点设计开发符合移动端的H5页面
						，全面兼容手机、PAD等移动设备，拓宽品牌传播渠道，结合移动互联网的特点，将个性化、社会化、场景化融入项目。
					</div>
					<div class="row case-list">
						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
						   <img src="img/pic01.jpg">
						   <div class="mask">
						      <h4>网站建设</h4>
						   <p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
						   </div>
						 </div>
						 <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic02.jpg">
						   <div class="mask">
						      <h4>网站建设</h4>
						   <p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
						   </div>
						 </div>
						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic03.jpg"></div>
						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic04.jpg"></div>
						     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic05.jpg"></div>
						      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic06.jpg"></div>
						       <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic07.jpg"></div>
						        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic08.jpg"></div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="container-fluid blue-bg">
		   <div class="container">
		    <h2 class="common-title text-center">合作伙伴</h2>
		    <div class="row">
		      <div class="col-lg-8 col-lg-offset-2 common-detail text-center">我们有众多的合作伙伴。</div>
		    </div>
		    <div class="row logo-list">
		      <div class="col-lg-2"><a href="" class="logo1"></a></div>
		      <div class="col-lg-2"><a href="" class="logo2"></a></div>
		      <div class="col-lg-2"><a href="" class="logo3"></a></div>
		      <div class="col-lg-2"><a href="" class="logo4"></a></div>
		      <div class="col-lg-2"><a href="" class="logo5"></a></div>
		    </div>
		   </div>
		</div>
		
		
		
		
		<div  class="container-fluid gray-bg">
		   <div class="container">
		     <div class="row links-list">
		      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
		        <dt>公司</dt>
		          <dd><a href="#">关于我们</a></dd>
		          <dd><a href="#">公司招聘</a></dd>
		          <dd><a href="">公司团队</a></dd>
		          <dd><a href="">版权</a></dd>
		          <dd><a href="">使用条款</a></dd>
		          <dd><a href="">隐私政策</a></dd>
		          <dd><a href="">联系我们</a></dd>
		      </div>
		      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
		        <dt>公司</dt>
		          <dd><a href="#">关于我们</a></dd>
		          <dd><a href="#">公司招聘</a></dd>
		          <dd><a href="">公司团队</a></dd>
		          <dd><a href="">版权</a></dd>
		          <dd><a href="">使用条款</a></dd>
		          <dd><a href="">隐私政策</a></dd>
		          <dd><a href="">联系我们</a></dd>
		      </div>
		      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
		        <dt>公司</dt>
		           <dd><a href="#">关于我们</a></dd>
		          <dd><a href="#">公司招聘</a></dd>
		          <dd><a href="">公司团队</a></dd>
		          <dd><a href="">版权</a></dd>
		          <dd><a href="">使用条款</a></dd>
		          <dd><a href="">隐私政策</a></dd>
		          <dd><a href="">联系我们</a></dd>
		      </div>
		      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
		        <dt>公司</dt>
		           <dd><a href="#">关于我们</a></dd>
		          <dd><a href="#">公司招聘</a></dd>
		          <dd><a href="">公司团队</a></dd>
		          <dd><a href="">版权</a></dd>
		          <dd><a href="">使用条款</a></dd>
		          <dd><a href="">隐私政策</a></dd>
		          <dd><a href="">联系我们</a></dd>
		      </div>
		    </div>
		   </div>
		</div>
		
		<div class="container-fluid dark-bg">
		   <div class="container">
		     <div class="row footer">
		       <div class="col-lg-6 col-md-6 col-sm-6 text-left">
		         &copy; 2017 Comlogo.All Rights Reserved.
		       </div>
		       <div class="col-lg-6 col-md-6 col-sm-6 text-right">
		         <a href="">HOME</a> 
		         <a href="">ABOUT US</a> 
		         <a href="">FAP</a>
		         <a href=""> CONTACT US</a>
		       </div>
		     </div>
		   </div>
		</div>
		    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		    <script src="js/jquery.min.js"></script>
		    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		    <script src="js/bootstrap.min.js"></script>
	</body>
</html>

在这里插入图片描述

lin鲸鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap_组件_导航条
zhangnan456的博客
08-29 178
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
曹鲁丹Bootstrap公共样式、边框颜色
qq_59317372的博客
05-23 301
<style type="text/css"> .c{ width:200px; height:200px; } span{ display: inline-block; } </style> <img src="img/img1.jpg" class="border border-success img-thumbnail"> <div class="border border-info m-5
bootstrap作业（4.6）
Xnine77_的博客
04-08 457
轮播图 导航条代码部分 轮播图代码部分 效果展示（1-5页）
一份Bootstrap框架的期末作业
06-17
这是我对平时bootstrap使用练习的一个集合，欢迎下载，使用的时候一定要注意更改页面底部标签-_-
Bootstrap
qq_59791762的博客
03-13 95
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"> &lt
软件20-4王静雯Bootstrap作业4
w_200415的博客
04-17 191
index.html <!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"> &l
LD46：鲁丹敢者46
02-20
【标题】"LD46：鲁丹敢者46" 是一个游戏开发项目，它参与了Ludum Dare，这是一个全球性的游戏制作马拉松活动。在这样的活动中，开发者通常需要在48小时或72小时内创建一个完整的游戏，从概念到完成。"鲁丹敢者46...
LD46：鲁丹敢敢46！
02-17
【标题】"LD46：鲁丹敢敢46！" 暗示这是一个游戏开发项目，可能是在Ludum Dare 46游戏制作马拉松活动中创建的。Ludum Dare是一个全球性的线上活动，参与者在有限的时间内独立或团队合作开发游戏，主题通常在活动开始...
LD39：鲁丹敢者39
02-04
LD39 建立 要设置游戏文件夹， npm install在根目录下运行npm install 。 玩 建议使用本地网络服务器进行播放。 如果未安装serve ，则只需在任何地方键入npm install -g serve 。 在根目录下运行serve以创建本地...
LD46：鲁丹敢果酱＃46。 主题：“保持生命”。 游戏：动物园管理员-在8种不同的迷你游戏中娱乐，喂养和照顾动物
02-10
主题：保持活力 该游戏讲述的是废弃的动物园，您是一个新的动物园管理员。 您需要娱乐，喂养和照顾各种动物。 该游戏包含8个具有7个难度等级的迷你游戏。...下载和链接 适用于 。 如果遇到任何问题，请留下问题！...
Bootstrap作业26.zip
最新发布
12-10
Bootstrap作业26.zip
bootstrap第一次大作业.rar
04-16
适合制作网页新手，非常简单的网页，bootstrap+html+css，实现网页跳转，图片自动切换
bootstrap纯前端作业设计
12-08
这是我在17年大一时没学多久做的纯前端js+css页面设计，分享给刚开始学的同学参考参考，希望能帮到大家。
Bootstrap期末作品
12-18
整体运用了栅格系统布局，局部应用了固定到顶部的导航栏组件，下拉菜单组件，轮播图插件，以及Bootstrap自带的按钮样式。希望通过学习Bootstrap从这种布局的思想，实现的方式中加深对CSS html 的理解
操作系统_第四章作业讲解
03-12
操作系统_第四章作业讲解
bootstrap作业
weixin_52765407的博客
03-13 576
bootstrap笔记 v5-导航栏------作业一 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Boot
Bootstrap作业
xdy541521的博客
04-12 818
模仿的Bootstrap中文网的练习 本以为很简单一个网页 但是必须要用Bootstrap来做硬是做了一下午才搞出来！ 记录下来以后回过头来再看看羞辱一下自己！ 样式 <style> * { list-style: none; } html { font-size: calc(1em + 1vw); } a { ..
3月16日bootstrap作业2
m0_61090178的博客
03-16 135
<!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个m
作业八 Bootstrap应用
qq_37655062的博客
07-04 569
【附加任务】 将商品详情页面利用Bootstrap改造成自适应页面没加的效果图：加了Bootstrap效果图：
"信息科技大学数据结构课程设计报告：排序与查找实践
姓名/学号：鲁丹 2012012108 1. 课程实践目的 本实践的目的是通过使学生对各类排序算法有更深入的了解，让他们在实际应用中学会使用排序算法解决具体问题。 2. 课程实践内容 a) 随机产生 20 个 0—100 之间的整数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值