Bootstrap入门教程一Hello Bootstrap初识

一、Bootstrap简介

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt开发的，它在 jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件，为实现快速开发提供了一套前端工具包，包括丰富的布局、栅格、丰富的Web组件和jQuery插件等，并能通过Less进行样式定制。

二、Hello Bootstrap

1.建立项目目录结构，新建app、css、font、img和js目录，其中app存放angular相关子模板和控制器。向css目录中拷贝入ie10-viewport-bug-workaround.css，向js目录中拷贝入ie8-responsive-file-warning.js、ie-emulation-modes-warning.js和ie10-viewport-bug-workaround.js，这几个文件是让bootstrap在ie浏览器中针对ie的兼容性做的优化。

?

2.新建index.html页面，在中引入bootstrap.css及兼容ie的css：

3.在底部依次引入jquery.js、bootstrap.js及兼容ie的js：

?

4.编写页面内容，先在标签下加入

,然后在其中插入具体页面代码，本例包括顶部导航和一个，完整代码如下：

rush:js;"> <Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <Meta name="description" content=""> <Meta name="author" content="Mac.Manon"> Hello Bootstrap dist/css/bootstrap.css" rel="stylesheet">

效果如下：

三、参考资源

官网：

官网中文站：

教程资源：

以上所述是小编给大家介绍的Bootstrap入门教程一Hello Bootstrap初识。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：Bootstrap Scrollspy源码学习下一篇：angular+bootstrap的双向数据绑定实