吃完饭想睡觉

使用Bootstrap做轮播图

什么是Bootstrap？

- Bootstrap 是当下最流行的前端框架（界面工具集）；

-特点就是灵活简洁，代码优雅，美观大方；

- 其目的是为了让 Web 开发更敏捷；
- 是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发。

使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式

下载Bootstrap：- [官方文档](http://getbootstrap.com/)
- [中文文档](http://v3.bootcss.com/)

* 视口声明：

- 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
- 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
  + width:视口的宽度
  + initial-scale：初始化缩放
  + user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
  + minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
  + maximum-scale:最大缩放
*条件注释:条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉
### 第三方依赖

- [jQuery](https://github.com/jquery/jquery)

    > Bootstrap框架中的所有JS组件都依赖于jQuery实现

- [html5shiv](https://github.com/aFarkas/html5shiv)

    > 让低版本浏览器可以识别HTML5的新标签，如header、footer、section等

- [respond](https://github.com/scottjehl/Respond)

    > 让低版本浏览器可以支持CSS媒体查询功能

## 建议以后在HTML中将脚步的引入放到页面最底下
CSS媒体查询：
   @media (判断条件（针对于当前窗口的判断）){
    /*这里的代码只有当判断条件满足时才会执行*/
}

@media (min-width: 768px) and (max-width: 992px) {
/*这里的代码只有当(min-width: 1280px)满足时才会执行*/
.container {
    width: 750px;
}
}
- 当使用min-width作为判断条件一定要从小到大，其原因是CSS从上往下执行
## 基础CSS样式

- [概要](http://v3.bootcss.com/css/#overview)
- [预置排版样式](http://v3.bootcss.com/css/#type)
    + 统一预制标签样式
- [按钮样式](http://v3.bootcss.com/css/#buttons)
- [表格样式](http://v3.bootcss.com/css/#tables)
- [表单样式](http://v3.bootcss.com/css/#forms)
- [图片样式](http://v3.bootcss.com/css/#images)
- [辅助工具类](http://v3.bootcss.com/css/#helper-classes)
- [代码样式](http://v3.bootcss.com/css/#code)
- [栅格系统](http://v3.bootcss.com/css/#grid)
    + __xs__ : 超小屏幕手机 (<768px)
    + __sm__ : 小屏幕平板 (≥768px)
    + __md__ : 中等屏幕桌面显示器 (≥992px)
    + __lg__ : 大屏幕大桌面显示器 (≥1200px)
- [响应式工具类](http://v3.bootcss.com/css/#responsive-utilities)
    + __hidden-xx__ : 在某种屏幕下隐藏
    + __visible-xx__ : 在某种屏幕尺寸下显示
## 预置界面组件

- [导航](http://v3.bootcss.com/components/#nav)
- [导航条](http://v3.bootcss.com/components/#navbar)
- [面包屑导航](http://v3.bootcss.com/components/#breadcrumbs)
- [下拉菜单](http://v3.bootcss.com/components/#dropdowns)
- [按钮式下拉菜单](http://v3.bootcss.com/components/#btn-dropdowns)
- [按钮组](http://v3.bootcss.com/components/#btn-groups)
- [输入框组](http://v3.bootcss.com/components/#input-groups)
- [警告框](http://v3.bootcss.com/components/#alerts)
- [页头](http://v3.bootcss.com/components/#page-header)
- [分页](http://v3.bootcss.com/components/#pagination)
- [列表组](http://v3.bootcss.com/components/#list-group)
- [面板](http://v3.bootcss.com/components/#panels)
- [媒体对象](http://v3.bootcss.com/components/#media)
- [进度条](http://v3.bootcss.com/components/#progress)
- [Glyphicons](http://v3.bootcss.com/components/#glyphicons)
- [标签](http://v3.bootcss.com/components/#labels)
- [徽章](http://v3.bootcss.com/components/#badges)
- [缩略图](http://v3.bootcss.com/components/#thumbnails)
- [大屏幕](http://v3.bootcss.com/components/#jumbotron)
- [嵌入内容](http://v3.bootcss.com/components/#responsive-embed)
- [内嵌](http://v3.bootcss.com/components/#wells)

## JavaScript插件

### JavaScript插件的依赖情况

### 如何使用Javascript插件

### 内置组件

- [模态对话框](http://v3.bootcss.com/javascript/#modals)
- [下拉菜单](http://v3.bootcss.com/javascript/#dropdowns)
- [滚动监听](http://v3.bootcss.com/javascript/#scrollspy)
- [标签页](http://v3.bootcss.com/javascript/#tabs)
- [工具提示](http://v3.bootcss.com/javascript/#tooltips)
- [弹出框](http://v3.bootcss.com/javascript/#popovers)
- [警告框](http://v3.bootcss.com/javascript/#alerts)
- [按钮](http://v3.bootcss.com/javascript/#buttons)
- [折叠面板](http://v3.bootcss.com/javascript/#collapse)
- [轮播图](http://v3.bootcss.com/javascript/#carousel)
- [吸顶效果](http://v3.bootcss.com/javascript/#affix)
    + data-spy="affix"
    + data-offset-top="什么位置出现"
    + data-offset-bottom="什么位置消失"

## 深度自定义 Bootstrap

### 在线自定义

- [官网在线](http://getbootstrap.com/customize/)
- [中文网在线](http://v3.bootcss.com/customize/)


轮播图的ID" class="carousel slide" data-ride="carousel">
  
  
    
    轮播图的ID" data-slide-to="0" class="active">
    轮播图的ID" data-slide-to="1">
    
  
  
  
    
    
      
      示例图片">
      
        
      
    
    
      
    
    
  
  
  
  
  轮播图的ID" role="button" data-slide="prev">
    
    上一张
  
  轮播图的ID" role="button" data-slide="next">
    
    下一张

#### 由于轮播图片超宽造成的影响

- 美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度
- 而且Bootstrap的样式中默认将图片的max-width设置为100%；
- 造成界面图片缩放
- 想在一个较小屏幕下展示一个超宽的图片，并让图片居中显示
  + 两种办法：
    * 换用背景图的方式，background-position: center center;
    * 使img元素绝对定位，left:50%，margin-left: -width/2

### background使用

- 将容器的高度固定（410px）
- 将轮播图改为背景显示
- 由于可能图片的高度不一定是410px
- 所以需要设置css3中的background-size

#### background-size

- length
  + 如 background-size: 100px 100px，将背景图固定到多大尺寸
- percentage
  + 如 background-size: 90% 90%，以百分比的形式设置背景大小
- cover
  + 1.背景图片等比例缩放
  + 2.让背景图相对较小边放大到目标容器大小结束
    * 如：一张100\*200的背景图放到一个300\*400的盒子中，最终背景图片的大小是300\*600
    * 因为背景图的较小边为100，将100放大到目标容器300的宽度，放大了3倍，最终结果300\*600
- contain
  + 1.背景图片等比例缩放
  + 2.让背景图相对较大边放大到目标容器大小结束
    * 如：一张100\*200的背景图放到一个300\*400的盒子中，最终背景图片的大小是200\*400
    * 因为背景图的较大边为200，将200放大到目标容器400的高度，放大了2倍，最终结果200\*400

##### demo

###### cover



###### contain




### 图片响应式

- 目的
  + 各种终端都需要正常显示图片
  + 移动端应该使用更小（体积）的图片
- 实现方式
  + 将元素中直接设置的图片背景删除，换成两个data-属性（如：data-img-sm="小图路径"，data-img-lg="大图路径"）
  + 通过JS的方式获取屏幕的宽度；
  + 判断屏幕宽度是否小于一定的值（如：768）
  + 根据判断情况决定使用具体的大图还是小图

javascript
// 获取屏幕宽度
var windowWidth = $(window).width();
// 判断屏幕属于大还是小
var isSmallScreen = windowWidth < 768;
// 根据大小为界面上的每一张轮播图设置背景
// $('#main_ad > .carousel-inner > .item') // 获取到的是一个DOM数组（多个元素）
$('#main_ad > .carousel-inner > .item').each(function(i, item) {
  // 因为拿到是DOM对象 需要转换
  var $item = $(item);
  // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
  var imgSrc =
    isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');

  // 设置背景图片
  $item.css('backgroundImage', 'url("' + imgSrc + '")');
});

使用Bootstrap做轮播图

你可能感兴趣的:(web前端)