博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap入门一:Hello Bootstrap
阅读量:5221 次
发布时间:2019-06-14

本文共 2265 字,大约阅读时间需要 7 分钟。

一、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.编写页面内容,先在标签下加入<div class="container"></div>,然后在其中插入具体页面代码,本例包括顶部导航和一个,完整代码如下:

    
Hello Bootstrap

Hello Bootstrap !

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 »

 

效果如下:

 

三、参考资源

官网:

官网中文站: 

精彩案例:

教程资源:

开发工具:

定制Bootstrap:

 

-----------------------------------------------------------------
专注App快速开发,欢迎关注微信公众号"App快速开发"。
 
分类: 

转载于:https://www.cnblogs.com/lvlina/p/6396943.html

你可能感兴趣的文章
博物院与国宝
查看>>
vmware tools 的安装(Read-only file system 的解决)
查看>>
数列求和总结
查看>>
「Unity」委托 将方法作为参数传递
查看>>
Unity学习疑问记录之隐藏与显示物体
查看>>
设计模式-学习
查看>>
button标签点击实现数量加减
查看>>
重置GNOME-TERMINAL
查看>>
quartz 实现调度任务 SchedulerManager
查看>>
new jordans 9 Nets
查看>>
redis哨兵集群、docker入门
查看>>
[翻译][架构设计]The Clean Architecture
查看>>
状态压缩DP
查看>>
Shell从入门到精通进阶之四:流程控制
查看>>
腾讯QQ、新浪微博等知名社交网络图标素材
查看>>
正则表达式2
查看>>
Unity3D_(插件)小地图自刷新制作Minimap小地图
查看>>
为什么分布式一定要有Redis?
查看>>
hihoCoder 1233 : Boxes(盒子)
查看>>
HihoCoder 1328 BFS 搜索
查看>>