发表于： 2018-05-25 22:03:02
1 451
今天完成的事情：
今天上午的时候，看了 Bootstrap 简单的概述，
Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，需要使用 HTML5 文档类型Bootstrap 项目的开头的代码变成了这样。
1.HTML 5 文档类型
<!DOCTYPE html><html>....</html>
如果不写成这样会面临一些浏览器显示不一样的问题，甚至可能面临一些特定情境下的不一致，以致于写的代码不能通过 W3C的标准
2.移动设备优先
Bootstrap 开发的网站对移动设备友好确保适当的绘制和触屏缩放需要在网页的 head 之中添加 viewport meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让的网页看上去更好的布局。
3.响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更好的显示出来
img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。
.img-responsive {
display: block;
height: auto;
max-width: 100%;}这个相关的图像呈现为 block。当把元素的 display 属性设置为 block，以块级元素显示。
如果要设置 height:auto，那相关元素的高度取决于浏览器。
如果设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友。
如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。
下午的时候看师姐写的得Bootstrap的一个简单的页面，用了很多的新属性，每一个都要添加
container明天计划的事情：
写一点任务，然后把bootstrap的概述和用法再看一遍
遇到的问题：
有的css颜色可以在HTML里面添加但都要用英文不能用数字了，对吧？
收获：
Bootstrap的基本用法
HTML 5 文档类型
移动设备优先
响应式图像
返回列表
评论