武汉纺织大学传媒学院 cm.wtu.edu.cn

Presentation on theme: "武汉纺织大学传媒学院 cm.wtu.edu.cn"— Presentation transcript:

1 武汉纺织大学传媒学院 cm.wtu.edu.cn
第27节 Bootstrap简介 武汉纺织大学传媒学院 cm.wtu.edu.cn 2018/9/18 传媒学院

2 1、Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的 简洁灵活，使得 Web 开发更加快捷 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的 Bootstrap 是 2011 年8月在 GitHub 上发布的开源产品 2018/9/18 传媒学院

3 2、为什么使用bootstrap 移动设备优先 浏览器支持 容易上手 响应式设计
只要你具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap 响应式设计 Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机 2018/9/18 传媒学院

4 3、使用准备 html文档中要使用boostrap提供的功能，必须链接其提供的css样式及插件库 例子
<!-- 引入bootstrap的css样式 --> <link href="bootstrap.min.css" rel="stylesheet"> <!-- 引入bootstrap插件需先引入jQuery插件 --> <script src="jquery.min.js"></script> <!-- 引入boostrap的插件 --> <script src="bootstrap.min.js"></script> 2018/9/18 传媒学院

5 4、Bootsrap使用举例 Bootstrap图片 Bootstrap 提供了三个可对图片应用简单样式的 class：
.img-rounded：添加 border-radius:6px 来获得图片圆角。 .img-circle：添加 border-radius:50% 来让整个图片变成圆形。 .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。 2018/9/18 传媒学院

6 2018/9/18 传媒学院

7 Bootstrap导航 .nav导航基类 表格导航 例子 <ul class="nav nav-tabs">
添加添加 class .nav-tabs 例子 <ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">学院介绍</a></li> <li><a href="#">师资力量</a></li> <li><a href="#">专业介绍</a></li> </ul> 2018/9/18 传媒学院

8 <ul class="nav nav-pills">
胶囊式的导航 使用 class .nav-pills 代替 .nav-tabs 即可 例子 <ul class="nav nav-pills"> <li class="active"><a href="#">首页</a></li> <li><a href="#">学院介绍</a></li> <li><a href="#">师资力量</a></li> <li><a href="#">专业介绍</a></li> </ul> 2018/9/18 传媒学院

9 Bootstrap轮播 Bootstrap 轮播（Carousel）插件显示了一个循环播放元素的通用组件 例子
<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="eiffel.jpg" alt="埃菲尔"></div> <div class="item"><img src="lv.jpg" alt="LV"></div> <div class="item"><img src="school.jpg" alt="荣军院" ></div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹ </a> <a class="carousel-control right" href="#myCarousel" data-slide="next">› 该div宽度和图片一样宽 2018/9/18 传媒学院

10 以上实例，不会自动滚动播放，只有在用户点击一下后，才会开始滚动播放
如果希望，一开始就自动滚动播放，要给最大的div，也就是含属性class=“carousel slide”的div加上属性data-ride="carousel“ 其他效果，大家自己百度 2018/9/18 传媒学院

11 作业 1、制作一格胶囊式导航菜单 2、制作一个包含5副图片的图片切换效果（轮播） 2018/9/18 传媒学院