Bootstrap入门学习
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<div class="col-xs-4 col-sm-6">col-xs-4 col-sm-6</div> </div> </div>
<div class="col-md-4">.col-md-4</div>
</div>
Bootstrap排版
1. 内联子标题
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=no">
<head> <link href=“css/bootstrap.min.css” rel=“stylesheet”> <!– 引入bootstrap --> <!– 引入jquery -->
<!– html文件开始标签 lang语言 --> <!-- head 标识页面头部信息 -->
2. Head部分的常用声明文件及css
js 文件的引入 3. Body主体部分的内容 4. Html常用标签及不同声明中的写 法 5. Div +css排版 6. Class与id的区别
目的：了解html标签 明白网页前端文件的构成及运行的过程
├── dist/
│ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
Bootstrap使用
</head>
Bootstrap CSS
1. Bootstrap栅格系统
2. Bootstrap排版
3. Bootstrap代码 4. Bootstrap表格 5. Bootstrap表单 6. Bootstrap按钮 7. Bootstrap图像
Bootstrap 容器
额外的小设 备收集（ <768px） 网格行为 最大容器宽 度 Class 前缀 列# 最大列宽 一直是水平 的 None (auto) .col-xs12 Auto 以折叠开始，断点 以上是水平的 750px .col-sm12 60px 以折叠开始，断点 以上是水平的 970px .col-md12 78px 以折叠开始，断点 以上是水平的 1170px .col-lg12 95px 小型设备平板电脑 （≥768px） 中型设备台式电脑 （≥992px） 大型设备台式电脑 （≥1200px）
Bootstrap
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的，用于 快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架。
DIV+CSS
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优 先的样式。
Bootstrap 表格
Bootstrap支持原来的表格元素
table
thead：表格标题行容器元素 tbody：表格主题内容 tr td th：表头(必须在thead中) caption：表格存储内容的总结
Bootstrap 表格类
class="table"设置内边距以及水平分割线
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。 Copy <div class="container"> ... </div> .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 Copy <div class="container-fluid"> ... </div> 容器内嵌套栅格系统
2. 强调 <small> <strong> <em>
3. 缩写
<abbr title="World Wide Wed">WWW</abbr> 4. 地址
<address></address>
5. 引用 6. 列表
Bootstrap 代码
1. Bootstrap允许你以两种形式显示代码：
code标签
Bootstrap 基本引入代码
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Title</title> <meta name="Keywords" content="keywords"> <meta name="Description" content="Description"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!--[if lt IE 9]> <!– 兼容html5标签 --> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>
<script src=“http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js”></script> </head> <body> <script src=“js/bootstrap.min.js”></script> </body>
<!– 引入bootstrap js, 注：因bootstrap js基于jquery 务必之前引入jquery -->
Bootstrap栅格系统
Bootstrap栅格系统-列嵌套
<div class="row"><!-- 嵌套 --> <div class="col-md-8"> <div class="row">
<div class="col-xs-8 col-sm-6">col-xs-8 col-sm-6</div>
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg
pre标签 注意：请确保你使用<pre>和<code>标签时，开始标签和结束标签使用 Unicode变体 < > 2. google prettify插件的使用 注意：要显示代码行号增加样式： li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8{list-style: decimal;} .linenums{padding-left:5px}
构。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩 展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框
、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有 的插件，也可以逐个包含这些插件。
1. 下载bootstrap:http://getbootstrap.com/2.3.2/ 2. 在html文档中加载bootstrap相关的文件（jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件） 注意： 为了Bootstrap开发的网站对移动设备友好，确保适当的显示和触屏缩放，需要在网页的head中增加viewport视 口
HTML div+css简述
Bootstrap 入门学习
Bootstrap框架学习
课程大纲
HTML+css简介
Bootstrap结构
Bootstrap的简单使用
HTML 基本构成元素
1. 头部声明两种方式
<!doctype html>
<html lang=“en”> <head>
<!-- 头部声明 文档为 html文件 -->
Bootstrap栅格系统
Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可
以随着设备和视口大小的增加而适当的增加到最多12列
媒体查询：
用来创建 Bootstrap 网格系统中的关键的分界点，根据不同的视口大小显示不同的内 容
Bootstrap栅格系统
Bootstrap栅格系统
浏览器支持：所有的主流浏览器都支持 Bootstrap。
Biblioteka Baidu
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和
手机。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
Bootstrap结构
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结
class="table-striped"在内容主体上看到条纹
class="table-bordered"表格周围增加边框 class="table-hover" 隔行换色 class="table-condensed" 精简表格
<meta charset="UTF-8"> <meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content=""> <title>Document</title> <link href='/images/favicon.ico' rel='icon' type='image/x-icon'/> <script type="text/javascript" src="/js/jquery.min.js"></script> </head> <body> <div class="" id=""> <div></div> </div> </body> </html> <!– 主体部分结束 --> <!– html闭合标签 --> <!-- 页面主体 显示部分 -->
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
Bootstrap 结构
预编译版
bootstrap/ ├── css/ │ ├── bootstrap.css
bootstrap/ ├── less/ ├── js/ ├── fonts/
Bootstrap 源码
<div class="col-md-4">.col-md-4</div>
</div>
Bootstrap排版
1. 内联子标题
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=no">
<head> <link href=“css/bootstrap.min.css” rel=“stylesheet”> <!– 引入bootstrap --> <!– 引入jquery -->
<!– html文件开始标签 lang语言 --> <!-- head 标识页面头部信息 -->
2. Head部分的常用声明文件及css
js 文件的引入 3. Body主体部分的内容 4. Html常用标签及不同声明中的写 法 5. Div +css排版 6. Class与id的区别
目的：了解html标签 明白网页前端文件的构成及运行的过程
├── dist/
│ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
Bootstrap使用
</head>
Bootstrap CSS
1. Bootstrap栅格系统
2. Bootstrap排版
3. Bootstrap代码 4. Bootstrap表格 5. Bootstrap表单 6. Bootstrap按钮 7. Bootstrap图像
Bootstrap 容器
额外的小设 备收集（ <768px） 网格行为 最大容器宽 度 Class 前缀 列# 最大列宽 一直是水平 的 None (auto) .col-xs12 Auto 以折叠开始，断点 以上是水平的 750px .col-sm12 60px 以折叠开始，断点 以上是水平的 970px .col-md12 78px 以折叠开始，断点 以上是水平的 1170px .col-lg12 95px 小型设备平板电脑 （≥768px） 中型设备台式电脑 （≥992px） 大型设备台式电脑 （≥1200px）
Bootstrap
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的，用于 快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架。
DIV+CSS
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优 先的样式。
Bootstrap 表格
Bootstrap支持原来的表格元素
table
thead：表格标题行容器元素 tbody：表格主题内容 tr td th：表头(必须在thead中) caption：表格存储内容的总结
Bootstrap 表格类
class="table"设置内边距以及水平分割线
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。 Copy <div class="container"> ... </div> .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 Copy <div class="container-fluid"> ... </div> 容器内嵌套栅格系统
2. 强调 <small> <strong> <em>
3. 缩写
<abbr title="World Wide Wed">WWW</abbr> 4. 地址
<address></address>
5. 引用 6. 列表
Bootstrap 代码
1. Bootstrap允许你以两种形式显示代码：
code标签
Bootstrap 基本引入代码
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Title</title> <meta name="Keywords" content="keywords"> <meta name="Description" content="Description"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!--[if lt IE 9]> <!– 兼容html5标签 --> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>
<script src=“http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js”></script> </head> <body> <script src=“js/bootstrap.min.js”></script> </body>
<!– 引入bootstrap js, 注：因bootstrap js基于jquery 务必之前引入jquery -->
Bootstrap栅格系统
Bootstrap栅格系统-列嵌套
<div class="row"><!-- 嵌套 --> <div class="col-md-8"> <div class="row">
<div class="col-xs-8 col-sm-6">col-xs-8 col-sm-6</div>
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg
pre标签 注意：请确保你使用<pre>和<code>标签时，开始标签和结束标签使用 Unicode变体 < > 2. google prettify插件的使用 注意：要显示代码行号增加样式： li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8{list-style: decimal;} .linenums{padding-left:5px}
构。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩 展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框
、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有 的插件，也可以逐个包含这些插件。
1. 下载bootstrap:http://getbootstrap.com/2.3.2/ 2. 在html文档中加载bootstrap相关的文件（jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件） 注意： 为了Bootstrap开发的网站对移动设备友好，确保适当的显示和触屏缩放，需要在网页的head中增加viewport视 口
HTML div+css简述
Bootstrap 入门学习
Bootstrap框架学习
课程大纲
HTML+css简介
Bootstrap结构
Bootstrap的简单使用
HTML 基本构成元素
1. 头部声明两种方式
<!doctype html>
<html lang=“en”> <head>
<!-- 头部声明 文档为 html文件 -->
Bootstrap栅格系统
Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可
以随着设备和视口大小的增加而适当的增加到最多12列
媒体查询：
用来创建 Bootstrap 网格系统中的关键的分界点，根据不同的视口大小显示不同的内 容
Bootstrap栅格系统
Bootstrap栅格系统
浏览器支持：所有的主流浏览器都支持 Bootstrap。
Biblioteka Baidu
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和
手机。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
Bootstrap结构
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结
class="table-striped"在内容主体上看到条纹
class="table-bordered"表格周围增加边框 class="table-hover" 隔行换色 class="table-condensed" 精简表格
<meta charset="UTF-8"> <meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content=""> <title>Document</title> <link href='/images/favicon.ico' rel='icon' type='image/x-icon'/> <script type="text/javascript" src="/js/jquery.min.js"></script> </head> <body> <div class="" id=""> <div></div> </div> </body> </html> <!– 主体部分结束 --> <!– html闭合标签 --> <!-- 页面主体 显示部分 -->
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
Bootstrap 结构
预编译版
bootstrap/ ├── css/ │ ├── bootstrap.css
bootstrap/ ├── less/ ├── js/ ├── fonts/
Bootstrap 源码