Bootstrap学习--初识Bootstrap
来源:互联网 发布:港台电视直播软件app 编辑:程序博客网 时间:2024/05/21 14:08
1.什么是Bootstrap?
答:Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的。
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
2.为什么使用bootstrap?
答:移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持:所有的主流浏览器都支持 Bootstrap。
- 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
- 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
- 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
- CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
- 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
- JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在Bootstrap 插件 部分详细讲解。
- 定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
4.从官网上下载Bootstrap 源代码
如果您下载了 Bootstrap 源代码,那么文件结构将如下所示:
- less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
- dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
- docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。
5.Bootstrap CDN推荐
本站实例采用的是百度的静态资源库上的Bootstrap资源。
百度的静态资源库的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费,引入代码如下:
6.HTML 5 文档类型(Doctype)
Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,您需要使用 html5 文档类型(Doctype)。 因此,请在使用 Bootstrap 项目的开头包含下面的代码段。如果在 Bootstrap 创建的网页开头不使用 Html5 的文档类型(Doctype),您可能会面临一些浏览器显示不一致的问题,甚至可能面临一些特定情境下的不一致,以致于您的代码不能通过 W3C 标准的验证。
7.移动设备优先
移动设备优先是 Bootstrap 3 的最显著的变化。
在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备。
现在不一样了,Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。
Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备。这实际上是一个非常及时的转变,因为现在越来越多的用户使用移动设备。
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。
通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
注意,这种方式我们并不推荐所有网站使用,还是要看您自己的情况而定!
8.Bootstrap 浏览器/设备支持
Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。
旧的浏览器可能无法很好的支持。
下表为 Bootstrap 支持最新版本的浏览器和平台:
- Bootstrap学习--初识Bootstrap
- Bootstrap学习--初识Bootstrap
- ( 一)bootstrap学习——初识bootstrap
- Bootstrap实战--初识bootstrap
- bootstrap初识
- 初识bootstrap
- bootstrap初识
- 初识Bootstrap
- 初识Bootstrap
- Bootstrap初识
- 初识bootstrap
- BootStrap 框架初识
- Bootstrap栅格系统初识
- 【读书笔记《Bootstrap 实战》】1.初识Bootstrap
- bootstrap学习
- Bootstrap 学习
- bootstrap学习
- bootstrap学习
- Redis启动的三种方式
- Kotlin-22.Lambda表达式和函数
- TCP连接的建立和释放(三次握手和四次挥手)
- 【C#】面向对象之多态
- 数据库锁的基本概念
- Bootstrap学习--初识Bootstrap
- 关于驱动和设备的一点所思所想(未完待续,根据以后的学习再补充)
- Java精选笔记_面向对象(包、访问控制、内存机制、垃圾回收机制)
- ANDROID-Interface
- 删除数据库的商品
- <NOIP> 2 . P1001 A+B Problem
- U3D 日志、文本打印
- 为何学这么多技术,却做不好Coder!
- N皇后问题1.0