关闭

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

标签: bootstrap响应式CSSHTMLWEB前端
1627人阅读 评论(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
查看评论

Bootstrap响应式布局原理

Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(v...
  • qq_21794603
  • qq_21794603
  • 2017-04-05 11:40
  • 2674

基于Bootstrap3制作响应式布局网站(一)

现在的上网设备十分多,每种设备的分辨率都不一样,传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局,而Bootstrap的出现使得网站开发更加简单快捷。Bootstrap是Twitter推出的一个用于前端开发的开源工具包,其中的一个特性就是支持响应式布局。 原创文章,欢迎转载,请保留出处。 有...
  • maxwell_nc
  • maxwell_nc
  • 2015-05-17 18:29
  • 20861

编写bootstrap响应式页面 就这么简单

Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备。使用它编写响应式页面快捷、方便,而且屏蔽了浏览器差异。使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。 经过学习,我发现自己也具备了分分钟开发出一个高大上的...
  • zhihui1017
  • zhihui1017
  • 2016-12-19 10:26
  • 1439

浅谈bootstrap响应式与针对不同应用场景开发不同css样式区别

1.标签内容不同 bootstrap响应式: 其他: 2.@media不同 bootstrap响应式:@media screen and (max-width:900px) and (min-width:500px){ //满足条件执行 .text{ } } 其他:在link标签中规定...
  • qq_39894133
  • qq_39894133
  • 2017-12-21 10:20
  • 60

使用bootstrap响应式需注意的9个问题

响应式网页设计目前是很受欢迎的布局方式,在操作上和对用户友好体验度上来说绝对是我们的首选,自适应的响应越来越少,在处理兼容,效率上往往都比较麻烦,那作为web前端的我们接下来看一看在引入bootstrap响应式要注意什么呢? 一、自适应网页设计与响应式对比 它们看似乎相同,但有一定区别。...
  • AinUser
  • AinUser
  • 2017-03-23 14:00
  • 1181

使用bootstrap制作响应式导航栏

所谓响应式导航栏,便是能根据窗体大小适配的导航栏,以前见着觉得很高级,而现在终于有机会自己写一个了,先上几张效果图。 这是正常屏幕: 这是手机等小屏幕: 点击右边后能够显示出菜单 要实现这个效果,首先要先导入bootstrap框架 <link rel='styleshe...
  • qq_32623363
  • qq_32623363
  • 2017-07-10 13:09
  • 2175

bootstrap 微信开发页面

bootstrap 微信页面
  • hichinamobile
  • hichinamobile
  • 2016-10-20 19:06
  • 1995

H5实现评论&评论回复页面

一、效果 二、所需文件(回复区大部分都是为了兼容浏览器)三、代码实现1.HTML代码框架2.CSS回复区域整体框架布局1*{margin:0px;padding: 0px;} ul{list-style: none;} .cfl{*zoom: 1;} ...
  • w_linux
  • w_linux
  • 2017-05-18 16:46
  • 4346

bootstrap响应式页面的一些感想

bootstrap的栅格系统很好用,将整个页面分成了12份,然后随着页面的宽度变化可以跟随着一块变化 但是!不能设定页面的宽度,设定宽度的话,他就会把这个宽度分成12份。不能实现响应式页面。 这种的话就根据页面的大小,来进行使用几个格。 感觉好像都用xs就好了,xs可以适应任何大小的屏幕 ...
  • less_cold
  • less_cold
  • 2016-10-14 15:39
  • 570

一套不错的基于Bootstrap的博客系统静态页面

一套不错的基于Bootstrap的博客系统静态页面,能够为省去前端技术不是太好 ,又想做博客系统的朋友们提供一个不错的前端页面模板。 该博客系统静态页面采用bootstrap前端框架,能够兼容移动端访问,外观轻便简洁,进一步开发后台程序方便。 同时本静态页面配套了一个后台程序,形成了一个完整的博...
  • u013611978
  • u013611978
  • 2017-02-27 14:12
  • 4125
    个人资料
    • 访问:75209次
    • 积分:1464
    • 等级:
    • 排名:千里之外
    • 原创:61篇
    • 转载:3篇
    • 译文:5篇
    • 评论:15条
    欢迎关注


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