Bootstrap入门教程一Hello Bootstrap初识

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.编写页面内容，先在标签下加入

Toggle navigation

&ljrdpKuDfpt;span class="icon-bar">

Buyinplay

Dropdown

This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.

View detail docs »

效果如下：

三、参考资源

官网：http://getbootstrap.com

官网中文站： http://bootcss.com

教程资源：http://runoob.com/bootstrap/bootstrap-page-header.html

以上所述是给大家介绍的Bootstrap入门教程一Hello Bootstrap初识，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。