- 简介:
- bootstrap是最受欢迎的html，css和js框架，用于开发响应式布局，移动设备优先的web项目
- bootstrap3在bootstrap2的基础之上，重写了框架，boostrap是移动设备优先的
-
- 参考bootstrap中文网站:
- http://v3.bootcss.com/getting-started/
- 第一个HelloWord:
- bootstrap中文网中起步类别中下载使用于开发生产环境的bootstrap文件
-
代码示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Bootstrap Template</title> <%--引入css文件--%> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <p>this is the first helloworld</p> <%--引入js文件--%> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
- 注意:
- 引入文件参照官网上面的例子和要求
- 主要可以分为三部分：
- （
- bootstrap.min.css/bootstrap.css
- jquery.min.js/jquery.js
- bootstrap.min.js/bootstrap.js
- ）
- 一般呢，引入外部文件的顺序也是按照我上面的顺序进行引入的(jquery.js必须在bootstrap.js之前引入)
- html5文档类型
-
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置
- <!DOCTYPE html>
- <html lang="zh-CN">
- ...
- <html>
-
使用图标:
按钮:
下拉菜单
按钮组
输入框组
表单:
表单(行)
表单(并列)
input输入框校验属性:
input禁用和只读:
单选多选(default)
单选多选(行)
单选多选(无文本)
下拉列表
close按钮:
图片显示效果:
显示和隐藏:
居中:
导航:
路径导航:
徽章:
可关闭warning:
进度条:
bootstrap总结(特点):
自我总结:
①:主要依靠class="内定的类别 样式" role="内定类别"等来控制界面样式/布局问题
②:12栏栅格系统来布局界面
③:界面的自适应以及响应式布局