boostrap(一) css概览

最新推荐文章于 2023-06-26 10:38:21 发布

陈家洛1号

最新推荐文章于 2023-06-26 10:38:21 发布

阅读量117

点赞数

1.HTML 5 文档类型：Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype），如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），您可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于您的代码不能通过 W3C 标准的验证。

<!DOCTYPE html>
<html>
....
</html>

2.支持移动设备

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

（1）width=device-width：正确呈现在不同分辨率设备上
（2）initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
（3）user-scalable=no 可以禁用其缩放（zooming）功能
（4）maximum-scale=1.0 与 user-scalable=no 一起使用：用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉

3.响应式图片：如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

.img-responsive {
  display: block;//块级元素显示
  height: auto;//相关元素的高度取决于浏览器。
  max-width: 100%;//会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好
}

4.全局

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

5.排版

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

6.链接样式

通过属性 @link-color 设置全局链接的颜色。

对于链接的默认样式，如下设置：

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

7.避免跨浏览器的不一致：Normalize.css

保留有用的浏览器默认样式，而不是一概将它们“抹杀”，对浏览器很友好

https://www.imooc.com/article/40319

8.Bootstrap 浏览器/设备支持

Bootstrap 浏览器/设备支持

	Chrome	Firefox	IE	Opera	Safari
Android	YES	YES	不适用	不适用	不适用
iOS	YES	不适用	不适用	不适用	YES
Mac OS X	YES	YES	不适用	YES	YES
Windows	YES	YES	YES*	YES	不适用