[bootstrap] bootstrap 简介和相关网址
2015-11-09 11:57
555 查看
Bootstrap 来自 Twitter,是目前很受欢迎的前端框架。
基于 HTML、CSS、JAVASCRIPT ,简洁灵活,使 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less(CSS 预处理器,让 CSS 具有动态性)写成。
目前使用较广的是版本2和3,其中2的最新版本的是2.3.2,3的最新版本是3.3.5。
包含了丰富的Web组件:
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象、模式对话框、标签页、滚动条、弹出框等。
1、相关网址
2、国内 Bootstrap CDN 加速服务
请注意,Bootstrap 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Bootstrap 之前引入。而且jquery的版本最好是>=1.9.1
3、Bootstrap 的基本文件结构
4、基本模版
5、一些例子
【主题】http://v3.bootcss.com/examples/theme/
【栅格】http://v3.bootcss.com/examples/grid/
【普通导航条】http://v3.bootcss.com/examples/navbar/ http://v3.bootcss.com/examples/navbar-static-top/
【固定顶部导航条】http://v3.bootcss.com/examples/navbar-fixed-top/
【自定义组件】
封面图:http://v3.bootcss.com/examples/cover/
旋转木马carousel:http://v3.bootcss.com/examples/carousel/
博客页面:http://v3.bootcss.com/examples/blog/#
控制台:http://v3.bootcss.com/examples/dashboard/
登录页:http://v3.bootcss.com/examples/signin/
自适应nav:http://v3.bootcss.com/examples/justified-nav/
6、Bootlint 工具
7、基于bootstrap的一些优秀网站推荐
http://expo.bootcss.com/
8、图标
bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标:
基于 HTML、CSS、JAVASCRIPT ,简洁灵活,使 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less(CSS 预处理器,让 CSS 具有动态性)写成。
目前使用较广的是版本2和3,其中2的最新版本的是2.3.2,3的最新版本是3.3.5。
包含了丰富的Web组件:
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象、模式对话框、标签页、滚动条、弹出框等。
1、相关网址
Bootstrap 中文网 http://v3.bootcss.com/ 起步 http://v3.bootcss.com/getting-started/#download http://docs.bootcss.com/bootstrap-2.3.2/docs/getting-started.html#html-template 样式字典 布局和栅格:http://docs.bootcss.com/bootstrap-2.3.2/docs/scaffolding.html 基本css:http://docs.bootcss.com/bootstrap-2.3.2/docs/base-css.html 组件:http://docs.bootcss.com/bootstrap-2.3.2/docs/components.html js字典 http://docs.bootcss.com/bootstrap-2.3.2/docs/javascript.html 定制自己的bootstrap http://docs.bootcss.com/bootstrap-2.3.2/docs/customize.html 源码下载 【简化版本】http://d.bootcss.com/bootstrap-3.3.5-dist.zip 【源码版本】http://d.bootcss.com/bootstrap-3.3.5.zip
2、国内 Bootstrap CDN 加速服务
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
请注意,Bootstrap 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Bootstrap 之前引入。而且jquery的版本最好是>=1.9.1
3、Bootstrap 的基本文件结构
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── 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 └── glyphicons-halflings-regular.woff2
4、基本模版
<!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"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
5、一些例子
【主题】http://v3.bootcss.com/examples/theme/
【栅格】http://v3.bootcss.com/examples/grid/
【普通导航条】http://v3.bootcss.com/examples/navbar/ http://v3.bootcss.com/examples/navbar-static-top/
【固定顶部导航条】http://v3.bootcss.com/examples/navbar-fixed-top/
【自定义组件】
封面图:http://v3.bootcss.com/examples/cover/
旋转木马carousel:http://v3.bootcss.com/examples/carousel/
博客页面:http://v3.bootcss.com/examples/blog/#
控制台:http://v3.bootcss.com/examples/dashboard/
登录页:http://v3.bootcss.com/examples/signin/
自适应nav:http://v3.bootcss.com/examples/justified-nav/
6、Bootlint 工具
Bootlint 是 Bootstrap 官方所支持的 HTML 检测工具。 在使用了 Bootstrap 的页面上(没有对 Bootstrap 做修改和扩展的情况下),它能自动检查某些常见的 HTML 错误。 纯粹的 Bootstrap 组件需要固定的 DOM 结构。Bootlint 就能检测你的页面上的这些“纯粹”的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。 建议将 Bootlint 加入到你的开发工具中,这样就能帮你在项目开发中避免一些简单的错误影响你的开发进度。
7、基于bootstrap的一些优秀网站推荐
http://expo.bootcss.com/
8、图标
bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标:
<h3>图标</h3> <span class="glyphicon glyphicon-home"></span> <span class="glyphicon glyphicon-signal"></span> <span class="glyphicon glyphicon-cog"></span> <span class="glyphicon glyphicon-apple"></span> <span class="glyphicon glyphicon-trash"></span> <span class="glyphicon glyphicon-play-circle"></span> <span class="glyphicon glyphicon-headphones"></span>
相关文章推荐
- BootStrap学习(5)_多媒体对象&列表组
- Bootstrap按钮
- 使用 Bootstrap 快速开发网站和 Web 应用程序
- bootstrap在线模板
- bootstrap如何把表单select input button弄在一行
- Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)
- bootstrap估计和bootstrap估计的Monte Carlo近似
- Bootstrap初级用户谈谈网页在手机上的显示效果优化
- django1.8引用bootstrap创建响应式登录界面
- 关于bootstrap小图标的使用
- bootstrap
- 在JSP中使用BootStrap
- 【新技术,学习、商业均可】HTML5 全新高大尚后台 bootstrap springmvc mybatis java企业级通框架源码入门
- 结合LayoutIt学习Bootstrap的探索
- fh admin bootstrap 模版下载 框架 源码 SpringMVC mybatis or hibernate
- [bootstrap] 实用的bootstrap模版下载
- 编译Bootstrap,定制自己的模板。
- bootstrap学习
- BootStrap学习(4)_分页&标签&缩略图&警告&进度条
- bootstrap的导航改造