学习笔记3-Bootstrap CSS 【转载整理->原创】

最新推荐文章于 2018-03-07 20:08:26 发布

落花新月

最新推荐文章于 2018-03-07 20:08:26 发布

阅读量1.2k

点赞数

分类专栏： bootstrap&Metro UI 文章标签： html5 响应式布局设计移动

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/41951017

版权

bootstrap&Metro UI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、html5

1.Bootstrap使用了Html元素和CSS属性。因此，需要使用Html5文档类型（doctype）。所以，要在bootstrap项目中加如下代码：

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

如果不适用上述代码，可能会出现浏览器显示相关的一些问题。

二、移动设备

1. 移动设备优先是 Bootstrap 3 的最显著的变化。

2.Bootstrap 3 的设计目标是移动设备优先，其次才是桌面设备。

3.为了确保在移动设备中适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如：

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

1）width=device-width : 确保网页在不同屏幕分辨率的设备上正常显示。

2）initial-scale=1.0 :保证网页加载时，以 1:1 的比例呈现，没有有任何缩放。

3）在移动设备浏览器上，通过为 viewport meta 标签添加

user-scalable=no

可以禁用其缩放（zooming）功能。

4）通常，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像应用。相关代码如下：

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

***注意，这种方式我们并不推荐所有网站使用，具体视情况而定！

三、图像

1.通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

<img src="..." class="img-responsive" alt="响应式图像">

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

1）height：auto; max-width: 100%; 图像按比例缩放，不超过其父元素的尺寸。

2)display: inline-block; 元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。

3)height:auto，相关元素的高度取决于浏览器。

4) max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

四、布局和链接

1. body {margin: 0;} ：去除body的边距

2. 排版样式

@font-family-base

@font-size-base

@line-height-base

3. @link-color ：设置链接的颜色

链接的样式：

a:hover,   鼠标滑过或者悬停在上面
a:focus {      鼠标点击过后
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;         <span style="font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 16px;"> #333 的细的虚线轮廓</span>
  outline: 5px auto -webkit-focus-ring-color;    <span style="font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 16px;"> #333 的细的虚线轮廓</span>
  outline-offset: -2px;   轮廓偏移2px
}

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。

Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

5. container:

<div class="container">
  ...
</div>

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。

.container:before,
.container:after {
  display: table;
  content: " ";
}

这会产生伪元素。

display :table ; 会创建一个匿名的 table-cell 和一个新的块格式化上下文。

before 伪元素防止上边距崩塌

after 伪元素清除浮动。

如果 conteneditable 属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复。

.container:after {
  clear: both;
}

它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。

Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。

@media (min-width: 768px) {
   .container {
      width: 750px;
}

五、Bootstrap 浏览器/设备支持

Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。

下表为 Bootstrap 支持最新版本的浏览器和平台：

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

* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

资料来源：http://www.w3cschool.cc/bootstrap/bootstrap-css-overview.html

落花新月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记3-Bootstrap CSS 【转载整理->原创】

一、html51.Bootstrap使用了Html元素和CSS属性。因此，需要使用Html5文档类型（doctype）。所以，要在bootstrap项目中加如下代码：....如果不适用上述代码，可能会出现浏览器显示相关的一些问题。二、移动设备1. 移动设备优先是 Bootstrap 3 的最显著的变化。2.Bootstrap 3 的设计目标是移动设备优先，其次
复制链接

扫一扫