BootStrap3.0学习--起步
来源:互联网 发布:js身份证格式校验 编辑:程序博客网 时间:2024/05/17 04:32
Bootstrap简介
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架;基于HTML5、CSS3和jQuery开发的,由动态CSS语言LESS编写而成。
◆由@mdo和@fat 在Twitter工作时创建的,2011 年8月在GitHub上发布的开源产品,使用LESS CSS并用Node编译,托管在GitHub上,方便大家使用这一框架构建更好的web应用。
◆一个框架,可以在多种设备上运行,使你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备,这一切都是CSS媒体查询(Media Query)的功劳。
◆具有丰富的特色,12列的响应式栅格结构、丰富的组件、JavaScript插件、排版、表单控件,还有基于web的定制工具。
◆Bootstrap 是完全开源的。它的代码托管、开发、维护都依赖 GitHub 平台。
注:
1.LESS是一种基于CSS之上的高级语言,其目的是使得CSS开发更灵活和更强大。快速入门:http://www.w3cschool.cc/manual/lessguide/
2.Twitter是一个社交网络及微博客服务的网站,是全球互联网上访问量最大的十个网站之一。
3.GitHub 项目主页https://github.com/twbs/bootstrap
下载
在官网下载一个用于生产环境的Bootstrap的预编译版本,目录如下:
bootstrap/├── css/│ ├── bootstrap.css│ ├── 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 ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
如上图所示,可以看到已编译的 CSS 和 JS(bootstrap.*),以及已编译压缩的 CSS 和 JS(bootstrap.min.*)。同时也包含了Glyphicons 的字体,这是一个可选的Bootstrap主题。
注:
1.字体图标文件来自于Glyphicons字体,替代了先前的glyphicons-halflings.png图片
2.jQuery库的版本>=1.9.0即可
3.各个文件都有CDN加速服务,可以任意调用服务器毫无压力,在你的项目中直接调
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>即可
其他引用请查看:http://www.bootcdn.cn/
基础模板
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 包含头部信息用于适应不同设备 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap基础模板</title> <!-- 包含 bootstrap 样式表 --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- 修复HTML5在IE9以下的浏览器不支持的标签 --> <!--[if lt IE 9]> <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]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery是Bootstrap所必须的js插件 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 合并了Bootstrap JavaScript 插件 --> <script src="js/bootstrap.min.js"></script> </body></html>
注:
1.X-UA-Compatible是IE8的一个专有属性,用来设置IE浏览器兼容模式,IE=edge来指示IE8使用它支持的最高模式。
2.Respond.js 是一个快速、轻量的polyfill,用于为IE6-8以及其它不支持CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。
3.BootStrap前缀boot是长靴的意思,BootStrap.js放在body的底部,这样加载速度会更快^_^
4.jquery.js的位置是放在BootStrap.js上方的,因为BootStrap.js是基于jquery开发哒!
- BootStrap3.0学习--起步
- BootStrap3.0学习--起步
- BootStrap3.0学习--组件
- BootStrap3.0学习--组件
- Bootstrap3.0学习第一轮(入门)
- Bootstrap3.0学习(一)
- BootStrap3.0学习--JavaScript 插件
- BootStrap3.0学习--JavaScript 插件
- Bootstrap3.0学习第一轮(入门)
- Bootstrap3.0学习第一轮(入门)
- Bootstrap3.0入门学习系列教程
- Bootstrap3.0学习第九轮:CSS补充
- Bootstrap3.0入门学习系列教程
- Bootstrap3.0入门学习系列教程
- Bootstrap3.0入门学习系列教程
- Bootstrap3.0学习第四轮(排版)
- Bootstrap3.0学习第五轮(表格)
- Bootstrap3.0学习第六轮(表单)
- C++中的引用与指针的区别
- git branch用法总结
- vision里面pt与字号大小对应关系
- 160亿补贴难圆电信4G竞争的翻身梦
- struts2的文件上传
- BootStrap3.0学习--起步
- java字符串转换研究
- 国内手机游戏现状
- UVa 489 刽子手游戏
- BootStrap3.0学习--全局 CSS 样式
- 社説 20141225 第3次安倍内閣 経済再生と好循環を完遂せよ
- 改进hash遍历
- Vlan技术总结
- 【深入浅出IOS开发】Xcode6中如何设置分类