文档介绍：Web前端系列课程
CSDN辛兴涛
Bootstrap入门
课程大纲
Bootstrap简介
Bootstrap结构
Bootstrap的简单使用
Bootstrap简介
Bootstrap 是由 *** 的 Mark Otto 和 Jacob Thornton 开发的,用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架。
Bootstrap优点
移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持:所有的主流浏览器都支持 Bootstrap。
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学****Bootstrap。
Bootstrap结构
基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
Bootstrap使用
1. 下载bootstrap: //
2. 在html文档中加载bootstrap相关的文件(、 和 文件)
注意:
为了Bootstrap开发的网站对移动设备友好,确保适当的显示和触屏缩放,需要在网页的head中增加viewport视口
<meta name="viewport" content="width=device-width, initial-scale=, maximum-scale=, user-scalable=no">
Bootstrap CSS
1. Bootstrap网格系统
2. Bootstrap排版
3. Bootstrap代码
4. Bootstrap表格
5. Bootstrap表单
6. Bootstrap按钮
7. Bootstrap图像
Bootstrap网格系统
Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备和视口大小的增加而适当的增加到最多12列
媒体查询:
用来创建 Bootstrap 网格系统中的关键的分界点,根据不同的视口大小显示不同的内容
Bootstrap网格系统
Bootstrap排版
1. 内联子标题
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
2. 强调
<small> <strong> <em>
3. 缩写
<abbr title="World Wide Wed">WWW</abbr>
4. 地址
<address></address>
5. 引用
6. 列表