BootStrap入门学习
Part 1
Bootstrap简介
什么是 Bootstrap?
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 两位设计师开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap简洁灵活,使得 Web 开发更加快捷。
Bootstrap可以构建出非常优雅的前端界面,而且占用资源非常小。
为什么使用Bootstrap?
移动设备优先。框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持。所有的主流浏览器都支持。
容易上手。只要你具备HTML、CSS、JS基础知识,就可以开始学习。
响应式设计。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
Bootstrap环境安装
Bootstrap下载
下载的中文地址:http://v3./
Bootstrap环境安装
使用 Bootstrap 中文网提供的免费 CDN 加速服务
Bootstrap 中文网为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN(看更多可用的工具库。
什么是CDN加速服务?
CDN的全称是Content work,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。
Bootstrap基本模板
Bootstrap模板注意事项
Bootstrap模板必须是基于HTML5文件的。因此DTD类型定义必须是HTML5的。
Bootstrap文件当字符集设置,也要遵循HTML5的规范。
设置IE浏览器兼容模式(X-patible)。
设置模板,适用于所有平台(viewport )。
引入bootstrap的CSS主文件()。
引入jQuery插件的主文件(jQuery)
引入bootstrap的JS主文件()
全局CSS样式——概述
HTML5文档类型
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
移动设备优先
Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放,需要在<head> 之中添加 viewport 元数据标签。
全局CSS样式——概述
禁用移动设备上的缩放功能
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。
布局容器
Bootstrap 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
CSS全局样式——排版
标题
HTML 中的所有标题标签,<h1> 到<h6> 均可使用。另外, 类,为的是给内联(inline)属性的文本赋予标题的样式。
在标题内还可以包含<small> 类的元素,可以用来标记副标题。
页面主体
Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 。这些属性直接赋予<body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
CSS全局样式——排版
内联文本元素
被删除的文本:<del>HTML5删除文本</del>、<s>XHTML删除文本</s>
插入的文件:<ins>插入文本</ins>
下划线的文本:<u>下划线文本</u>
小号文本:<small></small>
着重文本:<strong></strong>
斜体文本:<em></em>
文本对
BootStrap入门学习(1) 来自淘豆网m.daumloan.com转载请标明出处.
