- 简介:
- 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栏栅格系统来布局界面
③:界面的自适应以及响应式布局