关闭

[置顶] 使用BootStrap开发一个响应式的页面

标签: bootstrap响应式CSSHTMLWEB前端
936人阅读 评论(0) 收藏 举报
分类:

1.1 需求

开发一套页面,可以适用在PC端,Pad端,和手机端。不影响你的浏览的效果

 

1.2 分析

 技术分析

BootStrap的概述】

1).BootStrap的概念

2).什么是响应式:

响应式页面设计:一套页面可以适配不同的设备.(PC,PAD,手机)

3).BootStrap的中文网:

http://www.bootcss.com/

4).下载BootStrap

 

 

 

4).BootStrap的结构:

* 全局CSS

    * BootStrap定义了一套CSS的样式表.

* 组件

    * BootStrap定义的一套按钮,导航条...

* JS插件

    * BootStrap定义的一套JS的插件.

 

5).BootStrap的入门开发:

		<meta charset="UTF-8">
		<!--BootStrap设计的页面支持响应式的 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<!--引入BootStrap的CSS-->
		<link rel="stylesheet" href="../../css/bootstrap.css" type="text/css"/>
		<!--引入JQuery的JS文件:JQuery的JS文件要在BootStrap的js的文件的前面引入-->
		<script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>
		<!--引入BootStrap的JS的文件-->
		<script type="text/javascript" src="../../js/bootstrap.js" ></script>

补充说明:
  meta:
         width:可视区域的宽度,值可为数字或关键词device-width
         height:同width
         intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
         maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
              maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
         user-scalable:是否可对页面进行缩放,no 禁止缩放


 

6).BootStrap布局容器:

 

7).BootStrap的栅格系统:

响应式的设计:

    * CSS3的样式:媒体查询

栅格样式:

    *设备的分辨率大于 1200使用lg样式

    *设备的分辨率大于 992 < 1200使用md样式

    *设备的分辨率大于768 < 992使用sm样式

    *设备的分辨率小于 768使用xs样式

将一行分成12.定义div元素 样式的和 加一起等于12 即可.

 

8).BootStrap的全局CSS:

定义了一套CSS

  *对页面中的元素进行定义:

  *列表元素,表单,按钮,图片...

 

1.3代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--BootStrap设计的页面支持响应式的 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<!--引入BootStrap的CSS-->
		<link rel="stylesheet" href="../css/bootstrap.css" type="text/css"/>
		<!--引入JQuery的JS文件:JQuery的JS文件要在BootStrap的js的文件的前面引入-->
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
		<!--引入BootStrap的JS的文件-->
		<script type="text/javascript" src="../js/bootstrap.js" ></script>
	</head>
	<body>
		<!--整体div-->
		<div class="container">
			<!--导航栏-->
			<div>
			
			<nav class="navbar navbar-inverse">
			  <div class="container-fluid">
			    <!-- 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/logo2.png" height="100%"></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="#">Java学院 <span class="sr-only">(current)</span></a></li>
			        <li><a href="#">IOS学院</a></li>
			        <li><a href="#">C++学院</a></li>
			        <li><a href="#">UI设计学院</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="#">Java学院</a></li>
			            <li><a href="#">IOS学院</a></li>
			            <li><a href="#">C++学院</a></li>
			            <li role="separator" class="divider"></li>
			            <li><a href="#">UI设计学院</a></li>
			            <li role="separator" class="divider"></li>
			            <li><a href="#">网络营销学院</a></li>
			          </ul>
			        </li>
			      </ul>
			      <form class="navbar-form navbar-right" role="search">
			        <div class="form-group">
			          <input type="text" class="form-control" placeholder="Search">
			        </div>
			        <button type="submit" class="btn btn-default">Submit</button>
			      </form>
			    </div><!-- /.navbar-collapse -->
			  </div><!-- /.container-fluid -->
			</nav>
			</div>
			<!--图片轮播-->
			<div>
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				  <!-- Indicators -->
				  <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>
				    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
				  </ol>
				
				  <!-- Wrapper for slides -->
				  <div class="carousel-inner" role="listbox">
				    <div class="item active">
				      <img src="../img/okwu.jpg" alt="">
				      <div class="carousel-caption">
				        <p>aaaa</p>
				      </div>
				    </div>
				    <div class="item">
				      <img src="../img/okwu-athletics.jpg" alt="">
				      <div class="carousel-caption">
				        
				      </div>
				    </div>
				    <div class="item">
				      <img src="../img/bartlesvillecf.jpg" alt="">
				      <div class="carousel-caption">
				        
				      </div>
				    </div>
				    <div class="item">
				      <img src="../img/emancipation.jpg" alt="">
				      <div class="carousel-caption">
				        
				      </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>
			</div>
			
			<!--信息展示-->
			<div>
				<div class="col-md-4 col-sm-6 col-xs-12">
					<h2>WelCome</h2>
					<p>WelCome to HeiMa!WelCome to HeiMa!WelCome to HeiMa!</p>
					<p><a href="#" class="btn btn-primary pull-right">See More</a></p>
				</div>
				<div class="col-md-4 col-sm-6 col-xs-12">
					<h2>Our Team</h2>
					<p>Our Team,Our Team,Our Team,Our Team,Our Team,Our Team</p>
					<p><a href="#" class="btn btn-primary pull-right">See More</a></p>
				</div>
				<div class="col-md-4 col-sm-12 col-xs-12">
					<h2>About Us</h2>
					<p>About Us,About Us,About Us,About Us,About Us,About Us</p>
					<p><a href="#" class="btn btn-primary pull-right">See More</a></p>
				</div>
			</div>
		</div>
	</body>
</html>


 

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:44460次
    • 积分:1110
    • 等级:
    • 排名:千里之外
    • 原创:56篇
    • 转载:3篇
    • 译文:5篇
    • 评论:12条
    欢迎关注


    博客专栏
    技术交流和分享
    工作邮箱:humf@vip.qq.com
    技术分享和交流QQ群:432135803
    微信公众号
    微信公众号
    分享到: 微信 更多