学习笔记3-Bootstrap CSS 【转载整理->原创】
来源:互联网 发布:过山车大亨1 mac 编辑:程序博客网 时间:2024/06/05 16:08
一、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}
4.
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 支持最新版本的浏览器和平台:
* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。
资料来源:http://www.w3cschool.cc/bootstrap/bootstrap-css-overview.html
- 学习笔记3-Bootstrap CSS 【转载整理->原创】
- 学习笔记3-Bootstrap CSS 【转载整理->原创】
- 【学习笔记】Bootstrap常用组件整理
- 决策树学习笔记整理(转载)
- BootStrap学习笔记-3
- bootstrap学习笔记3:bootstrap常用组件
- Bootstrap学习&资料整理
- 个人学习原创整理
- live555学习 转载 + 原创
- Mybatis 学习笔记 1(非原创 自己整理)
- STC15单片机学习笔记(转载记录非原创)
- bootstrap css模式学习
- Bootstrap学习--CSS
- Bootstrap学习---css
- Bootstrap学习二--css
- Bootstrap学习-CSS样式
- Web前端CSS框架—Bootstrap学习笔记
- bootstrap v3学习笔记之全局css样式
- 在不公平的世界里,证明自己!
- MySQL-python使用
- boost::enable_shared_from_this的部分实现研究
- 马云等语录
- Boost 库 Enable_shared_from_this 实现原理分析
- 学习笔记3-Bootstrap CSS 【转载整理->原创】
- Python模块学习 ---- zlib 数据压缩
- 开发swift软件的快速方法--1024swift
- linux下make命令
- ZOJ3524:Crazy Shopping(拓扑排序+完全背包)
- boost::shared_ptr的使用方法
- Substring with Concatenation of All Words
- (一)U-Boot启动过程--详细版的完全分析
- 【JS】简易倒计时