Bootstrap中文文档.pdf

发布时间：2022-05-31 发布人：admin 分类：说明书资料大小：1.09M 资料格式：pdf 举报版权申诉

weixin_40730364-10338820-4744302543286990106.pdf-第1页.png

第1页 / 共113页

weixin_40730364-10338820-4744302543286990106.pdf-第2页.png

第2页 / 共113页

weixin_40730364-10338820-4744302543286990106.pdf-第3页.png

第3页 / 共113页

weixin_40730364-10338820-4744302543286990106.pdf-第4页.png

第4页 / 共113页

weixin_40730364-10338820-4744302543286990106.pdf-第5页.png

第5页 / 共113页

weixin_40730364-10338820-4744302543286990106.pdf-第6页.png

第6页 / 共113页

weixin_40730364-10338820-4744302543286990106.pdf-第7页.png

第7页 / 共113页

weixin_40730364-10338820-4744302543286990106.pdf-第8页.png

第8页 / 共113页

文本预览

Bootstrap

Bootstrap 介绍 • 1.Bootstrap 概述 • 2.Bootstrap 特点 • 3.Bootstrap 结构 • 4.创建第一个页面

Bootstrap 概述 • Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。 • 2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。 • Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD 以及手机移动端的页面访问。

Bootstrap 特点 • (1).跨设备、跨浏览器：移动设备优先。可以兼容所有现代浏览器，包括比较诟病的 IE7、 8。当然，本课不再考虑 IE9 以下浏览器。 • (2).响应式布局：不但可以支持 PC 端的各种分辨率的显示，还支持移动端 PAD、手机等屏幕的响应式切换显示。 • (3).提供的全面的组件：Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。 • (4).内置 jQuery 插件：Bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种常规特效。 • (5).支持 HTML5、CSS3：HTML5 语义化标签和 CSS3 属性，都得到很好的支持。 • (6).支持 LESS 动态样式：LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发。

Bootstrap 结构 bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 css(样式)、js(脚本)、fonts(字体)。主要分为三大核心目录：  1.css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是 css 源码映射表，在一些特定的浏览器工具中使用。  2.js 目录包含两个文件，是未压缩和压缩的 js 文件。  3.fonts 目录包含了不同后缀的字体文件。

创建第一个页面 //第一个 Bootstrap Bootstrap 介绍

全局 CSS 样式 • 基础 • 栅格系统 • 排版 • 代码 • 表格 • 表单 • 按钮 • 图片 • 辅助类 • 响应式工具

基础 • 移动设备优先 • 为了确保适当的绘制和触屏缩放，需要在之中添加 viewport 元数据标签。 • • 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能 • • 排版与链接 Bootstrap 排版、链接样式设置了基本的全局样式。分别是： •为 body 元素设置 background-color: #fff; •使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数 •为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 • 布局容器 • Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。 .container 类用于固定宽度并支持响应式布局的容器。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

...

分享到：

赞收藏

资料库

Bootstrap中文文档.pdf

相关推荐

移动开发

热门标签

最新资料