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.js
bootstrap
2.效果图
2.1PC端
bootstrap
2.2手机、pad端
bootstrap
2.3小功能
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
Bootstrap 101 Template
TOP1-打造极致产品开发团队
Developer Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
JAVA DEV Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
TOP2-打造个性化自媒体市场
Developer Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
JAVA DEV Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
TOP3-网站优化终生维护
Developer Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
JAVA DEV Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
TOP4-快速建站的价格屠夫
Developer Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
JAVA DEV Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。
