一、BootStrap介绍
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
1、什么Bootstrap
Bootstrap 是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
2、Bootstrap背景
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
3、Bootstrap优势
移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持:所有的主流浏览器都支持 Bootstrap,夸浏览器特性好。
容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件,易于定制。
它还提供了基于 Web 的定制。
它是开源的。
4、Bootstrap包的内容
基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
二、Bootstrap 的使用
1、Bootstrap:的使用就是合理的使用,封装好的css样式和js框架。
2、下载Bootstrap 载入到项目中,进行调用;
进入Bootstrap官网 下载Bootstrap官网 http://www.bootcss.com;下载Bootstrap 组件(提示:下载用于生产环境的 Bootstrap),下载完成后,有三个文件夹分别是:css、fonts、js;这三个文件夹就是封装好的Bootstrap框架,在框架文件夹css中全部是已经书写好的css样式,我们开发者只是引入就可以使用了,有如下文件:bootstrap.css于bootstrap.min.css, 类似的这个文件其实功能是一样的,后者为压缩后的文件,前者没有被压缩。而fonts于js文件夹则是已经封装好的字体、图标、javascript框架库;
三、建立项目、搭建环境
本次学习演示;使用HBuilder软件进行开发:
1、使用HBuilder建立项目
点击新建—web项目
书写项目名称:bootstrap 确定
2、导入Bootstrap框架
点击项目右键->选择导入
在导入中选择文件系统,将路径设置到下载的Bootstrap的位置确定;
3、下载jquery最新框架 放置到js文件夹中
四、案例--制作导航页
1、在Hbuilder中打开index页面,在页面中引入框架文件
2、创建导航标签
3、制作导航栏的内容部分 如下添加到 nav标签中:
设置内容部分样式:Container-fluid的默认样式 如下:设置了外边距和内边距
4、制作导航栏的头部
为整个网页加入logo,讲如下代码加入到 导航内容中,当然此时的img标签 需要有设置站点的logo图片;
样式解释代码如下:
5、制作导航条部分 放置在container中
Navbar-collapse:设置为流布局方式,设定超过一定得区域显示内容,否则隐藏内容,同是为导航部分设定登录|注册快捷方式 以及搜索快捷方式;
6、响应式布局
代码放置在 导航的头部中; collapse 主要是设置为 折叠隐藏方案 通过按钮控制内容部分的显示状况;
响应式导航栏制作完毕
7、完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--引入css文件 jquery文件 bootstrap文件-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>导航栏制作</title>
</head>
<body>
<!--设置导航栏的默认样式-->
<nav class="nav navbar-default">
<!--设置导航栏的内容设置-->
<div class="container-fluid">
<!--制作导航栏头部-->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--设置log-->
<a href="#" class="navbar-brand">
<img src="./img/logo.png" style="margin-top:-10px;"/>
</a>
</div>
<!--设置导航内容-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">首页</a> </li>
<li><a href="">介绍</a> </li>
<li><a href="">商品</a> </li>
</ul>
<div class="navbar-form navbar-right">
<a href="#" class="navbar-link">登录</a>
<a href="#" class="navbar-link">注册</a>
<input type="text" class="form-control" name="" id="" value="" />
<button class="btn btn-primary">搜 索</button>
</div>
</div>
</div>
</nav>
</body>
</html>
8、导航案例展示
当浏览器超过内容宽度时候
响应式模式
五、制作轮显示的广告
1、建立轮显页面
2、引入Bootstrap框架
3、设置轮显区域
4、设置轮显 案例样式
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
</div>
5、设置轮显图片 线型滚动效果
<div class="carousel-inner" style="text-align:center">
</div>
6、设定轮显项目图片
<div class="item active">
<img alt="First slide" src="img/aa.jpg" style="width:500px"></img>
</div>
<div class="item">
<img alt="Second slide" src="img/bb.jpg" style="width:500px"></img>
</div>
<div class="item">
<img alt="Third slide" src="img/cc.jpg" style="width:500px" ></img>
</div>
7、制作轮显控制按钮:
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
8、制作轮显焦点
<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>
</ol>
9、轮显整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--引入css文件 jquery文件 bootstrap文件-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>轮显广告</title>
</head>
<body >
<div style="width:500px; margin-left:auto; margin-right:auto;">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 轮显图标 -->
<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>
</ol>
<!-- 轮显内容 -->
<div class="carousel-inner" style="text-align:center">
<div class="item active">
<img alt="First slide" src="img/aa.jpg" style="width:500px"></img>
</div>
<div class="item">
<img alt="Second slide" src="img/bb.jpg" style="width:500px"></img>
</div>
<div class="item">
<img alt="Third slide" src="img/cc.jpg" style="width:500px" ></img>
</div>
</div>
<!-- 轮显控件 -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>
10、轮显案例展示