bootstrap写的第一个应用1

最新推荐文章于 2018-10-01 18:27:35 发布

风枝

最新推荐文章于 2018-10-01 18:27:35 发布

阅读量370

点赞数

文章标签： bootstrap

先创建三个文件夹，Template（存放html文件），assets（存放图片及css文件），js（存放JS文件）.

此应用使用Sublime编写。

创建三个HTML文件Home_index.html,Home_about.html,Home_case.html.和准备好图片素材.

Home_index

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Bootstrap 实例 - 默认的导航栏</title>
<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/style.css">
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

首先在head里头引入bootstrap相关组件，这里引入了一个css文件，是自行创建的.引入顺序不能错,不然会造成功能错乱。

接下来在body里写导航栏

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">微信公众号管家</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="../Template/Home_index.html">首页</a></li>
<li><a href="../Template/Home_about.html">关于</a></li>
<li><a href="#">登录</a></li>
</div>
</div>
</nav>

接下来时轮播图

<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>
	</ol>   
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="../assets/8.jpg" alt="First slide">
			<div class="carousel-caption"><h1>轮播1的标题</h1>
               <p>这里是轮播图1的说明</p></div>
		</div>
		<div class="item">
			<img src="../assets/7.jpg" alt="Second slide">
			<div class="carousel-caption"><h1>轮播2的标题</h1>
               <p>这里是轮播图2的说明</p></div>
		</div>
		<div class="item">
			<img src="../assets/6.jpg" alt="Third slide">
			<div class="carousel-caption"><h1>轮播3的标题</h1>
               <p>这里是轮播图3的说明</p>
               </div>
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="carousel-control left" href="#myCarousel" 
	   data-slide="prev">‹
	   <span class="glyphicon glyphicon-chevron-left"></span>
	   </a>
	<a class="carousel-control right" href="#myCarousel" 
	   data-slide="next">›
	   <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="case container">

	<div class="row">
	<div class="col-md-4">
	<img src="../assets/9.jpg"  class="img-circle">
	<h1>案例1</h1>
	<p>这是案例1的标题</p>
	</div>
	<div class="col-md-4">
	<img src="../assets/10.jpg"  class="img-circle">
	<h1>案例2</h1>
	<p>这是案例2的标题</p>
	</div>
	<div class="col-md-4">
	<img src="../assets/11.jpg"  class="img-circle">
	<h1>案例3</h1>
	<p>这是案例3的标题</p>
	</div>
</div>
</div>
<hr>

这是截图


<div class="b container-fluid">
<div class="row">
<div class="col-md-6">
	<img src="../assets/1.jpg" class="img-thumbnail">
</div>
<div class="col-md-6">
	<p>这是对截图1的解释</p>
	</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
	<p>这是对截图2的解释</p>
</div>
<div class="a col-md-6">
	<img src="../assets/2.jpg" class="img-thumbnail">
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
	<img src="../assets/1.jpg" class="img-thumbnail">
</div>
<div class="col-md-6">
	<p>这是对截图3的解释</p>

	</div>
</div>

最后是底部

<hr>
<div class="container-fulid">
  <footer>
      微信公众号管家版权所有 2016
      <a href="">风枝科技</a>
  </footer>
</div>
</body>
</html>

这是style.css的内容

.carousel-inner>.item>img{
  min-width: 100%;
  height: 400px;
}
.case {
  text-align: center;
  margin-top: 20px;
}
.case img {
  height: 200px;
}
.b img {
	width: 500px;
}
.b .a{
text-align: right;
}
.navbar {
  background-color: #000;
}
.navbar-nav li a, .navbar-nav li a:focus, .navbar-nav li a:visited {
  color: #FFF;
} /*focus选择获得焦点的链接字段，并设置其样式 visited,选择已访问的链接，并设置其样式;*/

效果图

风枝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap写的第一个应用1

先创建三个文件夹，Template（存放html文件），assets（存放图片及css文件），js（存放JS文件）.此应用使用Sublime编写。创建三个HTML文件Home_index.html,Home_about.html,Home_case.html.和准备好图片素材.Home_indexBootstrap 实例 - 默认的导航栏
复制链接

扫一扫