投稿
  1. 簡單一點首頁
  2. 投稿

在線修圖編輯器推薦「bootstrap在線編輯器哪個好」

投稿專員 • • 投稿

1.項目需求

編碼工具H-Builderless預處理css工具Koala考拉響應式框架bootstrap3.0javascriptjQuery1.10及以上需求jsbootstrap.min.js、html5shiv.js、respond.min.js、jquery.min.js輪播圖尺寸推薦1920px*1200px自建腳本cevent.less cevent.jsweb前端：企業官網響應式bootstrap一套代碼跑三端

bootstrap

2.效果圖

2.1PC端

web前端：企業官網響應式bootstrap一套代碼跑三端

bootstrap

2.2手機、pad端

web前端：企業官網響應式bootstrap一套代碼跑三端

bootstrap

2.3小功能

web前端：企業官網響應式bootstrap一套代碼跑三端

bootstrapweb前端：企業官網響應式bootstrap一套代碼跑三端

boostrap

3.less

* {
	margin: 0;
	padding: 0;
	.cevent-carousel {
		height: 500px;
		overflow: hidden;
		/*圖片被覆蓋*/
		margin-top: 50px;
		.item {
			img {
				width: 100%;
			}
			.carousel-caption {
				bottom: 78%;
			}
		}
	}
	.btn-group {
		label {
			top: -600px;
			right: -600%;
		}
	}
	.cevent-container {
		margin-top: 5px;
	}
	.thumbnail {
		border: none;
		border-radius: 0px;
		margin-bottom: 0px;
		text-align: center;
		.caption {
			.h3,
			h3 {
				margin-top: 0px;
			}
		}
	}
	.cevent-hr {
		margin: auto;
		hr {
			border: 1px solid silver;
			box-shadow: 1px 1px 2px silver;
		}
	}
	.tab-content-img {
		margin-top: 20px;
		img {
			width: 50%;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: 10px auto;
		}
	}
	.tab-content {
		bottom: 100px;
	}
	.cevent-footer {
		height: 27px;
		background: #000000;
		color: white;
		padding: 0;
		text-align: center;
		.h4,
		h4 {
			margin-top: 5px;
		}
	}
	.cevent-top {
		margin-top: -6.5%;
		margin-left:93.5%;
		padding: 2px 4px !important;
	}
	@media screen and (max-width:768px) {
		.cevent-carousel,
		.cevent-carousel .item {
			height: 200px;
			.carousel-caption {
				bottom: 50%;
			}
		}
		.btn-group {
			label {
				top: -70px;
				left: 100%;
			}
		}
	}
	@media screen and (min-width:768px) and(max-width:992px) {
		.cevent-carousel,
		.cevent-carousel .item {
			height: 400px;
			.carousel-caption {
				bottom: 20%;
			}
		}
		.btn-group {
			label {
				top: -100px;
				left: 300%;
			}
		}
	}
}

4.css

* {
  margin: 0;
  padding: 0;
}
* .cevent-carousel {
  height: 500px;
  overflow: hidden;
  /*圖片被覆蓋*/
  margin-top: 50px;
}
* .cevent-carousel .item img {
  width: 100%;
}
* .cevent-carousel .item .carousel-caption {
  bottom: 78%;
}
* .btn-group label {
  top: -600px;
  right: -600%;
}
* .cevent-container {
  margin-top: 5px;
}
* .thumbnail {
  border: none;
  border-radius: 0px;
  margin-bottom: 0px;
  text-align: center;
}
* .thumbnail .caption .h3,
* .thumbnail .caption h3 {
  margin-top: 0px;
}
* .cevent-hr {
  margin: auto;
}
* .cevent-hr hr {
  border: 1px solid silver;
  box-shadow: 1px 1px 2px silver;
}
* .tab-content-img {
  margin-top: 20px;
}
* .tab-content-img img {
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 10px auto;
}
* .tab-content {
  bottom: 100px;
}
* .cevent-footer {
  height: 27px;
  background: #000000;
  color: white;
  padding: 0;
  text-align: center;
}
* .cevent-footer .h4,
* .cevent-footer h4 {
  margin-top: 5px;
}
* .cevent-top {
  margin-top: -6.5%;
  margin-left: 93.5%;
  padding: 2px 4px !important;
}
@media screen and (max-width: 768px) {
  * .cevent-carousel,
  * .cevent-carousel .item {
    height: 200px;
  }
  * .cevent-carousel .carousel-caption,
  * .cevent-carousel .item .carousel-caption {
    bottom: 50%;
  }
  * .btn-group label {
    top: -70px;
    left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  * .cevent-carousel,
  * .cevent-carousel .item {
    height: 400px;
  }
  * .cevent-carousel .carousel-caption,
  * .cevent-carousel .item .carousel-caption {
    bottom: 20%;
  }
  * .btn-group label {
    top: -100px;
    left: 300%;
  }
}

5.js

//jquery:這裡可控制輪播圖的三個屬性
$(function() {
	//1.輪播
	$('.carousel').carousel({
		interval: 2000,
		pause: null, //滑鼠覆蓋,這裡的pause=hover和輪播開關衝突，如果需要滑鼠覆蓋點擊，則刪除輪播按鈕
		wrap: true //無縫循環
	});
	/*carousel按鈕
	 * jquery作用：鏈式調用、讀寫二合一、隱式迭代、編碼函數化
	 */
	$('#carousel-start-btn').click(function() {
		$('.carousel').carousel('cycle');
	});
	$('#carousel-stop-btn').click(function() {
		$('.carousel').carousel('pause');
	});

	//2.點擊跳轉
	$('.cevent-menu > li >a').click(function(e) {
		//獲取屬性
		var href = $(this).attr("href");
		console.log(href); //#TOP1
		$(".cevent-menu-list > li > a[href=" + (href) + "]").tab('show');
		//滾動條跳到a位置
		$(document).scrollTop($('.cevent-tag-page').offset().top);
		//禁止menu下的a標籤默認事件
		e.preventDefault();
	});
	
	//3.回頂
	$('.cevent-top').click(function(){
		$(document).scrollTop($('.carousel').offset().top);
		e.preventDefault();
	})
})

6.html

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--增強IE表現=edge-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
		<title>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/cevent.css" />
		<!--[if lt IE 9] IE9瀏覽器生效>
      <script  src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<!--1.導航-->
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<!--默認container-fluid流體布局，改為固定布局container-->
			<div class="container">
				<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="#">一刀coder-客戶端官網cevent</a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="#">公司簡介 </a>
						</li>
						<li>
							<a href="#" data-toggle="modal" data-target="#myModal">招商中心</a>
						</li>
						<li>
							<a href="#">最新活動</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多機會 <span class="caret"></span></a>
							<ul class="dropdown-menu cevent-menu">
								<li>
									<!--獲取標籤頁id，這裡的a標籤href需要禁，才能完成頁面跳-->
									<a href="#TOP1">專業團隊</a>
								</li>
								<li>
									<a href="#TOP2">產品優勢</a>
								</li>
								<li>
									<a href="#TOP3">市場趨勢</a>
								</li>
								<li>
									<a href="#TOP4">未來展望</a>
								</li>
								<li role="separator" class="divider"></li>
								<li>
									<a href="#">合作企業</a>
								</li>
							</ul>
						</li>
					</ul>
					<!--搜索框-->
					<!--<form class="navbar-form navbar-left">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="sousou產品搜索">
						</div>
						<button type="submit" class="btn btn-default">搜一下</button>
					</form>-->
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="#">歡迎cevent登錄！</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">個人設置 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">個人信息</a>
								</li>
								<li>
									<a href="#">登錄密碼</a>
								</li>
								<li>
									<a href="#">登出</a>
								</li>
								<li role="separator" class="divider"></li>
								<li>
									<a href="#">收貨地址</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container -->
		</nav>

		<!--2.輪播圖carousel
			bootstrap中，data-都是js中編寫的
			data-interval:事件間隔
			data-pause:hover為覆蓋暫停，null滑鼠覆蓋無效果，默認為hover
			data-wrap：true為無限循環，false為最後一張停止，默認為true
			js定義了carousel的切換屬性，這裡的css屬性不生效.js必須卸載頁面載入完畢body之後
		-->
		<div id="carousel-example-generic" class="carousel slide cevent-carousel" data-ride="carousel" data-interval="3000">
			<!-- Indicators -->
			<!--<div id="carousel-example-generic" class="carousel slide cevent-carousel" data-ride="carousel" >-->

			<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/carousel-輪播1200-1920-new.jpg" alt="...">
					<div class="carousel-caption">
						<h4>JAVA / MySQL / Linux...全棧組件開發者</h4>
					</div>
				</div>
				<div class="item">
					<img src="img/carousel-輪播1200-1920-new.jpg" alt="...">
					<div class="carousel-caption">
						<h4>JAVA / MySQL / Linux...全棧組件開發者</h4>
					</div>
				</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 class="btn-group">
				<label class="btn btn-primary ">
    			<input type="radio" name="options" id="carousel-start-btn" autocomplete="off"> 開啟輪播
  			</label>
				<label class="btn btn-primary">
    			<input type="radio" name="options" id="carousel-stop-btn" autocomplete="off"> 關閉輪播
  			</label>
			</div>
		</div>

		<!--3.三列布局-->
		<div class="container cevent-container">
			<div class="row">
				<div class="col-lg-3 col-md-4 col-sm-6 cevent-thumbnail">
					<!--去掉thumbnail邊框-->
					<div class="thumbnail">
						<img src="../b-img/my-logo-2.png" alt="...">
						<div class="caption">
							<h3>產品展示中心</h3>
							<p>product show center以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
							<p>
								<a href="#" class="btn btn-default" role="button">查看詳情</a>
							</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-4 col-sm-6">
					<div class="thumbnail">
						<img src="../b-img/my-logo-2.png" alt="...">
						<div class="caption">
							<h3>產品展示中心</h3>
							<p>product show center以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
							<p>
								<a href="#" class="btn btn-default" role="button">查看詳情</a>
							</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-4 col-sm-6">
					<div class="thumbnail">
						<img src="../b-img/my-logo-2.png" alt="...">
						<div class="caption">
							<h3>產品展示中心</h3>
							<p>product show center以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
							<p>
								<a href="#" class="btn btn-default" role="button">查看詳情</a>
							</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-4 col-sm-6">
					<div class="thumbnail">
						<img src="../b-img/my-logo-2.png" alt="...">
						<div class="caption">
							<h3>產品展示中心</h3>
							<p>product show center以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
							<p>
								<a href="#" class="btn btn-default" role="button">查看詳情</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--4.分隔線-->
		<div class="container cevent-hr">
			<hr />
		</div>

		<!--5.標籤頁-->
		<div class="container cevent-tag-page">

			<!-- a標籤的href-id對應tab-content -->
			<ul class="nav nav-tabs cevent-menu-list" role="tablist">
				<li role="presentation" class="active">
					<a href="#TOP1" aria-controls="TOP1" role="tab" data-toggle="tab">TOP1-頂級團隊</a>
				</li>
				<li role="presentation">
					<a href="#TOP2" aria-controls="TOP2" role="tab" data-toggle="tab">TOP2-全國市場</a>
				</li>
				<li role="presentation">
					<a href="#TOP3" aria-controls="TOP3" role="tab" data-toggle="tab">TOP3-質量保障</a>
				</li>
				<li role="presentation">
					<a href="#TOP4" aria-controls="TOP4" role="tab" data-toggle="tab">TOP4-性價比之王</a>
				</li>
			</ul>

			<!-- Tab panes -->
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane active" id="TOP1">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-8">
								<h3>TOP1-打造極致產品開發團隊</h3>
								<p>Developer Team Time 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>JAVA DEV Team Time 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>分散式資料庫管理 Manager System 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>分散式資料庫管理 Manager System 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
							</div>
							<div class="col-md-4 tab-content-img">
								<img src="../b-img/logo300-2.png" />
							</div>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="TOP2">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-4 tab-content-img">
								<img src="../b-img/logo300-2.png" />
							</div>
							<div class="col-md-8">
								<h3>TOP2-打造個性化自媒體市場</h3>
								<p>Developer Team Time 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>JAVA DEV Team Time 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>分散式資料庫管理 Manager System 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>分散式資料庫管理 Manager System 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
							</div>

						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="TOP3">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-8">
								<h3>TOP3-網站優化終生維護</h3>
								<p>Developer Team Time 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>JAVA DEV Team Time 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>分散式資料庫管理 Manager System 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>分散式資料庫管理 Manager System 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
							</div>
							<div class="col-md-4 tab-content-img">
								<img src="../b-img/logo300-2.png" />
							</div>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="TOP4">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-4 tab-content-img">
								<img src="../b-img/logo300-2.png" />
							</div>
							<div class="col-md-8">
								<h3>TOP4-快速建站的價格屠夫</h3>
								<p>Developer Team Time 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>JAVA DEV Team Time 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>分散式資料庫管理 Manager System 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
								<p>分散式資料庫管理 Manager System 團隊展示時刻：以產品為核心，以價格為驅動，以服務為保障。做國內一流互聯網產品開發團隊。</p>
							</div>

						</div>
					</div>
				</div>
			</div>

		</div>

		<!--6.尾部：版權字元實體-->
		<div class="navbar-fixed-bottom cevent-footer">
			<h4>©cevent- 2020-DEV 一刀coder</h4>
			<button type="button" class="btn btn-default cevent-top" data-toggle="button" aria-pressed="false" autocomplete="off">
  				回到頂部
			</button>
		</div>

		<!--7.模態框-->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
						<h4 class="modal-title" id="myModalLabel">招商中心</h4>
					</div>
					<div class="modal-body">
						<div class="list-group">
							<a href="#" class="list-group-item active">
								聯繫我們
							</a>
							<a href="#" class="list-group-item"><span class="glyphicon glyphicon glyphicon-headphones text-primary" aria-hidden="true"></span> 客服一號：138-8888-9999</a>
							<a href="#" class="list-group-item"><span class="glyphicon glyphicon glyphicon-headphones text-primary" aria-hidden="true"></span> 客服二號：138-8888-9999</a>
							<a href="#" class="list-group-item"><span class="glyphicon glyphicon glyphicon-headphones text-primary" aria-hidden="true"></span> 客服三號：138-8888-9999</a>
							<a href="#" class="list-group-item"><span class="glyphicon glyphicon glyphicon-headphones text-primary" aria-hidden="true"></span> 客服四號：138-8888-9999</a>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/cevent.js"></script>
	<script src="js/bootstrap.min.js"></script>

</html>

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/274973.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
0 0
上一篇 2024-12-17 14:18
下一篇 2024-12-17 14:18

相關推薦

發表回復

登錄後才能評論