响应式布局与bootstrap框架

时间 2021-04-12 标签 css html 前端 html5 node jquery web npm bootstrap 移动web开发

原文css

网页布局方式

一、固定宽度布局：为网页设置一个固定的宽度，一般以px作为长度单位，常见于PC端网页。html

二、流式布局：为网页设置一个相对的宽度，一般以百分比作为长度单位。前端

三、栅格化布局：将网页宽度人为的划分红均等的长度，而后排版布局时则以这些均等的长度作为度量单位，一般利用百分比作为长度单位来划分红均等的长度。html5

四、响应式布局：经过检测设备信息，决定网页布局方式，即用户若是采用不一样的设备访问同一个网页，有可能会看到不同的内容，通常状况下是检测设备屏幕的宽度来实现。node

注：以上几种布局方式并非独立存在的，实际开发过程当中每每是相互结合使用的。jquery

响应式布局

Responsive design，意在实现不一样屏幕分辨率的终端上浏览网页的不一样展现方式。经过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不同展现给用户的网页内容也不同，咱们利用媒体查询能够检测到屏幕的尺寸（主要检测宽度），并设置不一样的CSS样式，就能够实现响应式的布局。web

咱们利用响应式布局能够知足不一样尺寸的终端设备很是完美的展示网页内容，使得用户体验获得了很大的提高，可是为了实现这一目的咱们不得不利用媒体查询写不少冗余的代码，使总体网页的体积变大，应用在移动设备上就会带来严重的性能问题。npm

响应式布局经常使用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。bootstrap

响应式开发移动web开发

什么是响应式开发

在移动互联日益成熟的时候，桌面浏览器上开发的网页已经不能知足移动端的设备的展现和阅读
以前，一般的作法是对移动端单独开发一套特定的版本
可是，若是移动终端设备起来越多的时候赋发成本太大，是由于须要作全部屏幕的适配
响应式开发的目的就是:一个网站可以兼容多种终端
在新建的网站上通常都会使用响应式开发
移动web开发和响应式开发是必须具有的技能
演示响应者页面

响应式开发的原理：媒体查询：

查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不一样的屏幕宽度设置不一样的样式来适应不一样屏幕。当你重置浏览器大小的过程当中，页面也会根据浏览器的宽度和高度从新渲染页面。简单说，你能够设置不一样屏幕下面的不一样的样式，达到适配不一样的屏幕的目的。

实现方式：经过查询screen的宽度来指定某个宽度区间的网页布局。

超小屏幕（移动设备） w<768px
小屏设备 768px-992px 768 <= w <992
中等屏幕 992px-1200px 992 =< w <1200
宽屏设备 1200px以上 w>=1200

CSS 语法

@media mediatype and|not|only (media feature) {

    CSS-Code;

}

也能够针对不一样的媒体使用不一样 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒体类型

值描述

all 用于全部设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备

媒体功能

值描述

device-height 定义输出设备的屏幕可见高度。
device-width 定义输出设备的屏幕可见宽度。
max-device-height 定义输出设备的屏幕可见的最大高度。
max-device-width 定义输出设备的屏幕最大可见宽度。
min-device-width 定义输出设备的屏幕最小可见宽度。
min-device-height 定义输出设备的屏幕的最小可见高度。
max-height 定义输出设备中的页面最大可见区域高度。
max-width 定义输出设备中的页面最大可见区域宽度。
min-height 定义输出设备中的页面最小可见区域高度。
min-width 定义输出设备中的页面最小可见区域宽度。

简单案例说明：控制不一样屏幕尺寸下的屏幕背景色

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒体查询：注意and后面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>

CSS框架

随着Web应用变的愈来愈复杂，在大量的开发过程当中咱们发现有许多功能模块很是类似，好比轮播图、分页、选项卡、导航栏等，开发中每每会把这些具备通用性的功能模块进行一系列封装，使之成为一个个组件应用到项目中，能够极大的节约开发成本，将这些通用的组件缩合到一块儿就造成了前端框架。

Bootstrap框架：提升web开发效率

Bootstrap简介：当前最流行的前端UI框架(有预制界面组件), Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷
Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，造成一套本身独有的网站风格，并兼容大部分jQuery插件

为何使用Bootstrap:

有本身的生态圈，不断的更新迭代
提供一套简洁，直观，强悍的组件
标准化的html+css编码规范
让开发更简单，提升了开发效率
能够进行自定义扩展

BootStrap的版本了解

2.x.x:兼容性好 / 代码不够简洁，功能不够完善
3.x.x:稳定性好,放弃了IE6-IE7,对IE8的支持通常 /偏向于响应式布局开发，移动设备优先的web项目开发
4.x.x:测试阶段，偏向于响应式，移动设备

BootStrap基本模板

<!--说明页面是html5页面-->
<!DOCTYPE html>
<!--页面使用的语言环境-->
<html lang="zh-CN">
<head>
    <!--指定当前页面的字符编码-->
    <meta charset="utf-8">
    <!--若是是IE，会使用最新的渲染引擎进行渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--标准的视口设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其余内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap核心样式文件 -->
    <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries: 这两个文件的引入是为了支持IE8下面的html5元素和媒体查询：由于在IE8下面默认不支持HTML5和媒体查询，因此须要引入两个插件-->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// 若是经过file://来查看文件，那么respond.js文件不能正常工做，说明必须在http://形式下访问才有用-->
    <!--html5shiv.min.js：为了在IE8下面支持HTML标签
    respond.min.js：为了在IE8下面支持媒体查询-->
    <!--[if lt IE 9]> <!--只有IE9以前才会加载这两个文件  lt:less than-->
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond.js/respond.js"></script>
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) bootstrap是依赖jquery的-->
<script src="../lib/jquery/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed  bootstarp核心js文件-->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Bootstarp全局css样式

HTML5 文档类型

<!DOCTYPE html>

<html lang="zh-CN">

 ...

</html>

移动设备优先
Normalize.css:为了加强跨浏览器表现的一致性，使用了 Normalize.css

BootStrap版心容器—布局容器.

分类：

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据所有视口（viewport）的容器。

针对.container,当屏幕宽度>992px的时候，布局容器宽度为1170px
不然，当宽度>768px的时候，布局容器宽度为970px
当宽度<768px的时候，布局容器宽度为100%(750px)

BootStrap栅格系统

概念：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增长，系统会自动分为最多12列。栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
你的内容应当放置于“列（column）”内，而且，只有“列（column）”能够做为行（row）”的直接子元素。
相似 .row 和 .col-xs-4 这种预约义的类，能够用来快速建立栅格布局。Bootstrap 源码中定义的 mixin 也能够用来建立语义化的布局。
经过为“列（column）”设置 padding 属性，从而建立列与列之间的间隔（gutter）。经过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
栅格系统中的列是经过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可使用三个 .col-xs-4 来建立。
若是一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被做为一个总体另起一行排列。

实例：从堆叠到水平排列: 使用单一的一组 .col-md-* 栅格类，就能够建立一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一块儿的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。全部“列（column）必须放在 ” .row 内。

代码：

<div class="row">
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-8">.col-md-8</div>
   <div class="col-md-4">.col-md-4</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4">.col-md-4</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-6">.col-md-6</div>
   <div class="col-md-6">.col-md-6</div>
</div>

简单说：栅格系统就是规范了你的column占据的宽度，只不过这个宽度是bootstrap事先规范好了。
栅格系统的意义：移动设备和桌面屏幕：它能够规范在不一样尺寸的屏幕下，当前的列占据的宽度。或者说一行能够放置几个列。

代码：

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
     <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
     <div class="col-xs-6">.col-xs-6</div>
     <div class="col-xs-6">.col-xs-6</div>
</div>

细节：

栅格系统是往上兼容的：意味着小屏幕上的效果在大屏幕上也是能够正常显示的人，可是大屏幕上的设置在小屏幕上却没法正常显示。
Row能够再次嵌套在列中。若是不能填满整列，则默认从左排列，若是超出，则换行展现

栅格系统扩展说明：

嵌套列

代码：

<div class='container'>
    <div class='row'>
            <div class='col-md-2'>
                   <div class='row'>   
                           <div class='col-lg-6'></div>
                           <div class='col-lg-6'></div>
                    </div>  
            </div>
    </div>
</div>

列偏移

说明：使用 .col-md-offset-* 类能够将列向右侧偏移。这些类实际是经过使用 * 选择器为当前元素增长了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
注意：若是偏移前面的列，那么会将当前列后面全部的列都日后偏移
代码：

<div class="container">
    <div class="row">
        <!--设置列偏移，只在lg屏幕下才会有效果-->
        <div class="col-lg-2">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2  col-lg-offset-5">3</div>
    </div>
</div>

排序

后推：push
前拉：pull
代码

<div class="container">
    <div class="row">
        <!--设置列排序，只在lg屏幕下才会有效果，若是push或者pull的列数没有计算好，那么有可能形成重叠-->
        <div class="col-lg-2 col-lg-push-10">1</div>
        <div class="col-lg-10 col-lg-pull-2">2</div>
    </div>
</div>

BootStrap文档查看：能够利用bootstrap提供好的一些组件或者js效果来帮助咱们快速的完成页面的开发，提升开发的效果。

LESS:LESS 是动态的样式表语言，经过简洁明了的语法定义，使编写 CSS 的工做变得很是简单，本质上，LESS 包含一套自定义的语法及一个解析器。

安装Node.js

一、安装Nodejs环境 Node Package Manager (验证 node -v npm -v) npm:node packge manager

二、打开控制台（cmd），执行npm install -g less (验证 lessc -v) node packet manager

三、命令行编译 lessc path/xxx.less path/xxx.css

编译

浏览器只能识别CSS，LESS只是用来提高CSS可维护性的一个工具，所最终须要将LESS编译成CSS，然而经过命令行编译效率比较低下，通常都会借助于编辑器来完成编译，以sublime_text为例，sublime_text默认并不支持LESS的编译操做，须要安装插件实现。

一、执行npm install -g less-plugin-clean-css（使用sublime_text才用）

二、ctrl+shit+p打开命令面板

三、输入install package而后回车

四、安装 LESS、lessc、Less2Css三个插件

五、alt+s快捷键便可实现编译

语法

一、变量

格式：@变量名: 值，定义完成后能够重复使用

@baseColor:#e92323;
a{
  color: @baseColor;
}
div{
  border: 1px solid @baseColor;
}

二、混合

咱们能够像使用函数同样来使用CSS

/*至关于函数封装*/
.addRadius{
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
 }
/*定义带参的函数*/
.addRadius(@r){
  border-radius: @r;
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
}
/*能够定义带默认值的参数的函数*/
.addRadius(@r:5px){
  border-radius: @r;
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
}
div{
  width: 200px;
  height: 200px;
  /*.addRadius;*/
  /*至关于调用带参的函数*/
  //.addRadius(4px)
  .addRadius(10px);
}

三、嵌套

嵌套能够很是方便的管理咱们的CSS层级关系

.header{
　　heught:40px;
　　nav{
　　　　　　overflow:hidden;
　　　　　　a{
　　　　　　　　display:block;
　　　　　　　　width:100px;
　　　　　　　　height:40px;
　　　　　　　　float:left;
　　　　　　}
　　　　}
　　}

浏览器中使用

了解了LESS基本语法后，能够用LESS写编写CSS代码了，可是须要实时的将LESS编译成CSS浏览器才能识别，利用编辑器可以编译，可是效率相对较低。

咱们能够引入一个less.js文件，实现实时的解析，而没必要每次修改都要编译，最后完成全部开发任务后，再经过编辑器编译成css文件。

一、下载而后引入less.js

二、引入xx.less文件，如： <link rel="stylesheet/less" type="text/css" href="styles.less" />

注意：rel属性必须指定成stylesheet/less，而且styles.less要先于less.js引入。

必须以服务器方式访问，webstrom自带服务器功能也可使用ghostlab调试工具的服务器。

<!--说明页面是html5页面-->
<!DOCTYPE html>
<!--页面使用的语言环境-->
<html lang="zh-CN">
<head>
    <!--指定当前页面的字符编码-->
    <meta charset="utf-8">
    <!--若是是IE，会使用最新的渲染引擎进行渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--标准的视口设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其余内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap核心样式文件 -->
    <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries: 这两个文件的引入是为了支持IE8下面的html5元素和媒体查询：由于在IE8下面默认不支持HTML5和媒体查询，因此须要引入两个插件-->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// 若是经过file://来查看文件，那么respond.js文件不能正常工做，说明必须在http://形式下访问才有用-->
    <!--html5shiv.min.js：为了在IE8下面支持HTML标签
    respond.min.js：为了在IE8下面支持媒体查询-->
    <!--[if lt IE 9]> <!--只有IE9以前才会加载这两个文件  lt:less than-->
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond.js/respond.js"></script>
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) bootstrap是依赖jquery的-->
<script src="../lib/jquery/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed  bootstarp核心js文件-->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>