关于BootStrap的相关介绍

Posted 2022-12-18 sna-ling

一、Bootstrap

    Bootstrap的官网：www.bootcss.com

1.响应式布局

   Responsive web page 响应式/自适应的网页

   可以根据浏览器设备的不同(pc,pad,phone)

   自动调用对应的布局，图片，文字效果，从而不会降低用户体验。

 

2.响应式网页必须做到的前提

1.布局：不能固定宽度，必须是流式布局(尽量少用定位,可以浮动)

2.文字和图片，大小随着容器大小而改变 em rem

3.媒体查询技术

响应式页面存在的问题：

• • • 页面的复杂度极大的增加
    • 只适用用内容不多的页面(企业的官网，门户网站)
    • 媒体查询技术属于h5/c3的技术

boot把媒体查询这件事封装了，不需要我们自己写了

3.如何测试响应式页面

1.使用真实设备测试

• 好处：真实、可靠
• 缺点：测试任务量巨大

2.使用的第三方的模拟测试软件

• 好处：无需添置太多真实设备，测试方便
• 缺点：测试效果有限，有待进一步验证

3.使用浏览器自带的模拟器测试

• 好处：简单方便
• 缺点：测试效果有限，有待进一步验证

4.如何编写响应式布局

1.在元数据标签中定义viewport---视口

name="viewport"

content 设置能够允许网页进行操作

width=device-width 表示视口宽度就是设备宽度

initial-scale=1.0 表示视口宽度是否可以缩放 1.0不能缩放

maximum-scale=1.0 允许缩放的最大倍率

user-scalable=0 是否允许用户手动缩放 yes/no/1/0

一般的设置：

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

2.所有内容/文字/图片,相对尺寸，不能使用10px这种绝对的值。

3.流式布局+弹性布局，在搭配媒体查询技术来完成响应式布局

   float flex

4.使用css3 Media Query 技术做响应式网页

Media:媒体，只浏览网页的设备。如：screen(pc/pad/phone) tv print

Media Query:媒体查询，可以自动根据当前浏览器设备的不同(尺寸，解析度，方向不同)，

有选择指定一部分CSS而忽略其他部分的CSS.

根据媒体查询的结果，执行同一个css文件下的不同代码块。

@media screen and (min-width:768px) and (max-width:991px)

    选择器样式