移动端布局（bootstarp+响应式布局）

响应式原理

使用媒体查询针对于不同宽度的设备进行样式和布局的设置，从而适应不同的设备

设备的划分情况：

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）

注意：响应式需要一个父级元素作为容器，配合子级元素来实现更多效果

父容器版心尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px





    
    
    Document
    



    尧子陌

导航栏案例

bootstrap

Bootstrap简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

官网：www.bootcss.com/

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

bootstrap优点

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

bootstarp的使用

1.创建文件夹结构

2. 创建 html 骨架结构



  
    
    
    
    
    Bootstrap 101 Template

    
    

    
    
    
  
  
    你好，世界！

3. 引入相关样式文件

4 书写内容

直接拿Bootstrap 预先定义好的样式来使用

修改Bootstrap 原来的样式，注意权重问题

学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

代码演示





 
 
 
 
 Bootstrap 101 Template

 
 

 
 
 

 



 你好，世界！

 
     
         账号
         
     
     
         密码
         
     
     
         文件上传
         
         Example block-level help text here.
     
     
         
          勾选即同意

注意：可以直接拿bootstarp定义好的类用来直接使用即可

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类

.container

响应式布局的容器固定宽度
大屏 ( >=1200px) 宽度定为 1170px
中屏 ( >=992px) 宽度定为 970px
小屏 ( >=768px) 宽度定为 750px
超小屏 (100%)

.container-fluid

流式布局容器百分百宽度
占据全部视口（viewport）的容器。

容器的使用






    
    
    
    bootstarp容器的使用
    
    
    



    container
    container-flued

栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中。

按照不同屏幕划分为1~12 等份
行（row）可以去除父容器作用15px的边距
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class="col-md-4 col-sm-6"

利用栅格系统把一行划分为12份

栅格系统的其它情况

栅格系统刚好12份，则会占满整个父容器的宽度。
栅格系统不满12份，则占不满父容器的宽度，会有剩余的空白。
栅格系统多于12份，则会另起一行。

栅格系统之列嵌套

何为列嵌套呢，简单而言，就是把一行分为12份，每一份相当于1列，而每一行又可以划分为12等份。

列嵌套要加一个行（row）即可以去除父级元素的padding值而且高度会自动和父级一样高

栅格系统之列偏移

偏移的分数=(12份-当前子元素所占的分数)

列偏移

通过使用 .col-md-push和 .col-md-pull 类就可以很容易的改变列（column）的顺序

响应式工具

利用媒体查询功能，并使用工具类可以方便的针对不同设备展示或隐藏页面内容。

hidden:隐藏
visible：显示