一、Bootstrap概述
1 、 什么是Bootstrap ?
响应式设计Bootstrap是由美国Twitter公司开发的一种前端框架,用来快速开发响应式布局、移动设备优先的Web前端页面。
Bootstrap基于HTML、CSS、JAVASCRIPT,它简洁灵活,使得Web开发更加快捷,是目前最受欢迎的前端框架之一。
2、Bootstrap特性
①丰富的组件库 ②响应式设计 ③移动设备优先 ④浏览器支持 ⑤成本低,易上手
⑥CSS预编译 ⑦框架成熟
3、 Bootstrap的组成
基本结构:Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构
布局组件:Bootstrap包含了丰富的组件库,提供了十几个可重用的组件
CSS样式表:Bootstrap自带了全局的CSS样式,并预先定义了基本的HTML元素样式、可扩展的class。
插件:Bootstrap提供了一些基于jQuery(一个用于简化JavaScript编程的库)构建的可选插件。
二、移动端开发主流方案
1.单独制作移动端页面
单独制作移动端页面的优势和劣势:
优势:
①可以充分考虑到平台的优势和局限性;
②创建良好的用户体验设计;
③网页在移动设备上加载更快;
劣势:
①移动端网站会产生多个URL(PC端一套URL,移动端一套URL);
②维护成本会增加,工作量比较大;
③重定向移动网站需要花费一些时间,需要对搜索引擎做一些处理
2 、 制作响应式页面
响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局,从而使一个页面兼容不同的终端。 响应式开发主要是为了解决移动互联网浏览的问题。
响应式页面的优点:
①可以跨平台。响应式开发具有跨平台的优势,能够快捷地解决多终端设备的显示适配问题。
②便于搜索引擎收录,无论在移动端设备还是PC端上访问的都是同一个链接地址,这样就减少了权重的分散。让网站对搜索引擎更加友好。
③节约成本。响应式网站可以兼容多个终端,开发者不需要为各个终端编写不同的代码。对于开发者而言,减少了大量重复的工作,提高了工作的效率;对于公司而言,节省了人员开支,降低了开发成本。
三、我的第一个Bootstrap实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一个Bootstrap案例</title>
<!--第二个meta标记用于配置视口属性
content-width设置视口的宽度,这里表示视口宽度与设备宽度相同;
initial-scale设置初始缩放比例,默认为1-->
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入bootstrapCSS文件、
jQuery文件,bootstrapJS文件
(jQuery文件在前,bootstrapJS文件在后)-->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小,查看响应式效果!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>第一列</h3>
<p>Bootstrap是目前最受欢迎的前端框架之一。</p>
</div>
<div class="col-sm-4">
<h3>第二列</h3>
<p>Bootstrap用于快速开发响应式布局、移动设备优先、WEB项目</p>
</div>
<div class="col-sm-4">
<h3>第三列</h3>
<p>Bootstrap是基于HTML、CSS、JAVASCRIPT</p>
</div>
</body>
</html>
效果图: