Bootstrap学习笔记（一）入门

刺骨的言语ヽ痛彻心扉 2022-04-13 09:39 465阅读 0赞

1、什么是响应式网页

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

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

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

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

(3)CSS3 Media Query（[媒介查询][Link 1]）

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也引入了该概念。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70][]

<head>中加入

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

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 1][]

6、如何编写响应式网页

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

使用视口           内容设置   宽度为设备宽度（不设高） 逗号  初始缩放比例为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, 之后根据不同情况进行引用

/\*媒体查询语句：媒体为screen(pc/pad/phone)并且最小宽度为990px时引入pc.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时执行下面语句\*/

...

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 2][]

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

<head>

<title>Bootstrap 101 Template</title>

<!\[endif\]-->

</head>

<body>

</body></html>

解释：

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

IE浏览器的兼容性问题：

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

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

**html5shiv.js**

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

**respond.js    **

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

[Link 1]: http://www.baidu.com/link?url=iu4QlGYG0efTx6DIuZgxUJbMWQb9Qv5ovUGaLCDTT8yEApb-oCeOdWL_NlN5Lvwzqqf_d0KWUWasbTqwbU9Dl_dRM9yhQYNtiC4xH0fwtC7
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70]: /images/20220413/583b3d48954c434f94d8c95b4b76e578.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 1]: /images/20220413/4c35eb79ed844726a23af82fa366148b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 2]: /images/20220413/714dc614c95848c8b6aa1b5a4501a6c4.png