Bootstrap学习笔记（一）

时间  2021-08-15 标签 Bootstrap

1、什么是响应式网页

响应式网页/自适应网页（适应各种设备）：一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。

 

2、响应式网页的三个特征：

  (1)流式网格布局（像水一样，随容器形状的变化产生变化）

  (2)可伸缩的图片和字体

  (3)CSS3 Media Query（媒介查询）

 

3、如何测试响应式网页

  (1)使用真实物理设备——效果可靠但任务量太大

只要手机/平板/PC在同一个局域网/互联网即可测试。

  (2)使用第三方测试/模拟软件——效果有待进一步的验证

  (3)使用浏览器自带的模拟器测试：网页按F12左上角手机标志，可选设备，也可以输入宽高分辨率。

优势：可以模拟常见的设备、网速、经纬度、加速度....

不足：效果有待进一步的验证

 

4、使用webstorm

创建新项目：file->new project->empty project->选择路径（注意不要有中文和空格）

在新项目下建立js文件夹和css文件夹和img等常用的文件夹

在新项目下建立HTML文件

 

WS的常用操作：（使用的是eclipse的快捷键，需要设置settings的keymap改为eclipse）

  常用快捷键(Keymap/Eclipse)：

*复制当前行： Ctrl+Alt+↓

*向上/下移动当前行： Alt+↑/↓  （整个元素）

*删除当前行： Ctrl+D

*注释/取消当前行： Ctrl+/

*代码补全(ZenCoding)    Tab

     div.class#ss  ->  <div class="class" id="ss"></div>

    div.box*3  ->  <div class="box"></div><div class="box"></div><div class="box"></div>

    ul>li>span   ->   <ul><li><span></span></li></ul>

*假文生成(用于生成测试文字，生成内容不同)：

   lorem+TAB    （lorem法语中假文的意思）

*多行编辑（可以配合上边功能使用）：

      Alt+左键点击 开始多行同时编辑

      ESC/点击旁处 退出多行编辑模式

*重新格式化当前文档（将乱的代码对齐）： Ctrl+Alt+L

 

5、移动web中viewport（视口）

以前，HTML网页基本都是为PC设计的，所以宽度比较大。

iOS浏览器可以显示这些为PC而编写的网页——把PC网页缩小后放到手机屏幕上——文字/图片都会强制缩小，影响浏览体验。

iOS引入了viewport（视口）的概念：用于显示网页的内容的一个逻辑概念，其宽度/高度都可以任意指定，可以大到2000px都可以，网页不是仅仅显示在物理窗口，而是显示视口中——就可以实现大网页不经缩放，直接显示在手机中——只是需要用户左右滑动窗口即可。后来Android也引入了该概念。

 

       

    <head>中加入

<meta name="viewport" content="width=600px">

效果：

 

 

6、如何编写响应式网页

  (1)设置viewport元标签（只对手机有效）

<meta name="viewport"   content=   "width=device-width   ,    initial-scale=1.0    ,    user-scalable=no">

       使用视口           内容设置   宽度为设备宽度（不设高） 逗号  初始缩放比例为1.0    用户是否能缩放：不能

  (2)避免使用绝对单位(px)，用相对单位代替(%、auto、em等)，当用媒体查询技术时，也可以使用绝对单位

       所有元素的宽度尽量用相对单位代替： width:60%    width:auto    

       设置字体大小也用相对单位代替：font-size:1.5em

  (3)使用流式定位：float

  (4)图片大小实现自适应：

img {  max-width: 50%;  }   /*父容器大小的50%*/

width:会随着容器的改变而改变，即使图片本身呢像素只有100px，也会和容器一样大，可能失真。

max-width:会随着容器的改变而改变，且不会超过图片自身原始大小，防止失真。

  (5)根据浏览器屏幕的特征，有选择性的执行某些CSS样式——CSS3媒体查询技术(Media Query)

 

 

7、CSS3提供的Media Query技术

  作用：根据客户端浏览设备的特性，有选择性的执行部分CSS

  Media（媒体）：指浏览网页的设备，如screen(pc/pad/phone)、print、tv、projection、屏幕阅读器.....

  Query：查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩位深、方向Orientation(Landscape/Portrait)，根据这些特性，执行特定的CSS样式。

     

 PC：一般认为      width>990px

pad：一般认为     989px>width>768px

phone： 一般认为   767px>width

 

8、CSS3MediaQuery有两种用法：

  (1)根据媒体的特性，执行不同的外部CSS：

先创建三个对应屏幕大小的样式文件如pc.css, pad.css, phone.css, 之后根据不同情况进行引用

<link media="screen and (min-width: 990px)" rel="stylesheet" href="pc.css">

    /*媒体查询语句：媒体为screen(pc/pad/phone)并且最小宽度为990px时引入pc.css样式*/

<link media="screen and (min-width:768px) and (max-width: 989px)" rel="stylesheet" href="pad.css">

<link media="screen and (max-width: 767px)" rel="stylesheet" href="phone.css">

 

不足：客户端会不管媒体特性，请求所有的CSS文件。

  (2)根据媒体的特性，执行某段CSS中的部分内容：

     css文件

@media screen and (min-width:768px) and (max-width:990px) {    /*当屏幕尺寸为min-width:768px andmax-width:990px时执行下面语句*/

h1 {  ...  }

.box {  ...  }

}

@media screen and (min-width: 990px){    /*当屏幕尺寸为min-width: 990px时执行下面语句*/

    ...

}

@media screen and (max-width: 767px){    /*当屏幕尺寸为min-width: 990px时执行下面语句*/

 ...

}

 

 

 

 

 

#a1{background: #ddd;float: left;}
#a2{background:red;float: left;}
#a3{background: #444;float: left;}
*{padding: 0px;margin: 0px;}
@media screen and (min-width:990px) {
   #a1{ width: 20%; }
   #a2{ width:60% ; }
   #a3{ width: 20%; }
}
@media screen and (min-width:768px) and (max-width:989px) {
    #a1{width: 25%;}
    #a2{width:75% ;}
    #a3{display:none;}
}
@media screen and (max-width:767px){
    #a1{width: 100%;}
    #a2{width:100% ;}
    #a3{width: 100%;}
}

 

 

9、Twitter Bootstrap（引导程序）  网站（www.bootcss.com）

  Bootstrap是一个框架HTML/CSS/JS框架，适用于移动设备优先的响应式网页。 （主要为css框架，js部分很少用）

  Bootstrap分为五部分：

  1. 起步(Startup)
  2. 全局CSS样式(Global CSS)
  3. 组件(Component)
  4. 插件(Plugin)
  5. 定制(Customize)

 

 

10、Bootstrap第一部分：起步

  (1)下载Bootstrap  网站（www.bootcss.com）

  (2)安装Bootstrap   （把下载的css和js分别拷贝到根目录下就可以了）

  (3)网页基本模板

<!DOCTYPE html>

<html lang="zh-cn">   <!-- lang->language语言的意思，zh-cn简体中文-->

 

  <head>

    <meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--edge 表示客户端装的浏览器最新版本 -->

<!--如果用户用的是IE浏览器，那么IE的兼容模式设置为最新-->

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <title>Bootstrap 101 Template</title>

 

    <!-- Bootstrap -->

    <link href="css/bootstrap.css" rel="stylesheet">

 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    

<!--[if lt IE 9]>      <!--条件注释css hack 如果版本低于IE9，加载下面文件-->

      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  

<body>

    <h1>你好，世界！</h1>

 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><!--加载jQuery-->

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.js"></script><!--加载bootstrap.js-->

  </body></html>

 

解释：

lang属性的两个作用：(1)告诉浏览器翻译时如何确定当前网页的基础语言 (2)告诉读屏软件当前页面的基础发音

 

IE浏览器的兼容性问题：

X-UA-Compitable:  Cross-UserAgent-Compatible，该元标签只有IE浏览器支持。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

设置IE的兼容模式为edge——最新版，尽可能向行业标准看齐。

 

html5shiv.js

由@afarkas @jdalton @jon_neal @rem编写的一个JS自调用脚本，用于让老IE支持H5新标签。

respond.js        

由Scott编写的一个JS自调用脚本，用于让老IE浏览器支持CSS3MediaQuery技术，从而实现响应式网页的编写

联系我们 沪ICP备13005482号-10