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

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

<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

效果如下:

三、参考资源

官网:

官网中文站:

教程资源:

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

原文链接:https://www.f2er.com/bootstrap/41147.html

猜你在找的Bootstrap相关文章