bootstrap布局

最新推荐文章于 2024-09-26 17:26:51 发布

原创最新推荐文章于 2024-09-26 17:26:51 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #Css

Html 专栏收录该内容

1 篇文章

订阅专栏

自己在做项目的时候用到的，使用bootstrap，需要引入css和JS。用一个div包容所有的div并且在最大的div给一个类=容器

代码如下

<div class="container">
    <div class="vote">
        <div class="col-lg-4 col-sm-4 col-md-4">
            <div class="num renshu1"></div>
            <div class="renshu">参赛人数</div>
        </div>
        <div class="col-lg-4 col-sm-4 col-md-4">
            <div class="num renshu2"></div>
            <div class="renshu">投票数</div>
        </div>
        <div class="col-lg-4 col-sm-4 col-md-4">
            <div class="num renshu3"></div>
            <div class="renshu">访问量</div>
        </div>
        <div class="votes-left-line"></div>
    </div>
</div>

因为这些数据都是从后台拿的，所以这里是空的，下面是CSS

/*参赛选手*/
.userList{
	width:95%;
	background:white;
}

.userList .user{
 	padding-bottom:91.18%;
 	position:relative;
 	overflow:hidden;
}
.bgwhite{
	background:white;
}
.userList .username{
	text-align:left;
	color:#010101;
	background:white;
	padding:0 3%;
	box-sizing:border-box;
	height:60px;
}
.userList .songqi>div:first-child{
	font-size:22px;
	font-weight:bold;
}
.userList .songqi>div:last-child{
	font-size:18px;
}
.userList .voteser>button{
 	outline:none;
	margin-right:15px;
	margin-top:15px;
	width:56px;
	height:28px;
	background:linear-gradient(90deg,rgba(211,75,253,1),rgba(251,85,139,1));
	border-radius:14px;
	border:0;
	color:white;
	text-align:center;
}

然后下面用刷卡插件写了一个轮播

<div id="myCarousel" class="carousel slide ">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
  <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>   
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner clearfix">
 <div class="item active">
	<div class="col-lg-4 col-sm-4 col-md-4">
		<div class="userList">
			<div class="user"><img src="../images/user1.jpg"/></div>
			<div class="username">
				<div class="pull-left songqi">
					<div>王祖贤</div>
					<div>1565票</div>
				</div>
				<div class="pull-right voteser">
					<button>投票</button>
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-4 col-sm-4 col-md-4">
		<div class="userList">
			<div class="user"><img src="../images/user2.jpg"/></div>
			<div class="username">
				<div class="pull-left songqi">
					<div>李嘉欣</div>
					<div>1565票</div>
				</div>
				<div class="pull-right voteser">
					<button>投票</button>
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-4 col-sm-4 col-md-4">
		<div class="userList">
			<div class="user"><img src="../images/user3.jpg"/></div>
			<div class="username">
				<div class="pull-left songqi">
					<div>LIAO U</div>
					<div>1565票</div>
				</div>
				<div class="pull-right voteser">
					<button>投票</button>
				</div>
			</div>
		</div>
	</div>
 </div>
  <div class="item">
	<div class="col-lg-4 col-sm-4 col-md-4">
		<div class="userList">
			<div class="user"><img src="../images/user2.jpg"/></div>
			<div class="username">
				<div class="pull-left songqi">
					<div>李嘉欣</div>
					<div>1565票</div>
				</div>
				<div class="pull-right voteser">
					<button>投票</button>
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-4 col-sm-4 col-md-4">
		<div class="userList">
			<div class="user"><img src="../images/user3.jpg"/></div>
			<div class="username">
				<div class="pull-left songqi">
					<div>LIAO U</div>
					<div>1565票</div>
				</div>
				<div class="pull-right voteser">
					<button>投票</button>
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-4 col-sm-4 col-md-4">
		<div class="userList">
			<div class="user"><img src="../images/user1.jpg"/></div>
			<div class="username">
				<div class="pull-left songqi">
					<div>王祖贤</div>
					<div>1565票</div>
				</div>
				<div class="pull-right voteser">
					<button>投票</button>
				</div>
			</div>
		</div>
	</div>
  </div>
  <div class="item">
	 <img src="../images/3.jpg" alt="Third slide">
  </div>
  <div class="item">
	 <img src="../images/3.jpg" alt="Third slide">
  </div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
	<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	<span class="sr-only">Next</span>
</a>
</div>

放上CSS

.carousel{
	margin:auto;
	position:relative;
}
.carousel-inner{
	width: 90%;
	margin: 5%;
	margin-left: 6%;
	display: flex;
	justify-content: space-between;
}
.carousel .item{
	width: 100%;
	height: 443px;
	margin: auto;
	flex: 1;
}
.carousel .item img{
	position:absolute;
}
.carousel .carousel-indicators{
	bottom:0;
}
.carousel .arrow-left{
	width:40px;
	position: absolute;
	top:35%;
	/*left:-40px;*/
}
.carousel .arrow-right{
	position: absolute;
	top:35%;
	width:40px;
	right:0;
}

好了，结束了

用的的图