Bootstrap前端开发案例一

Bootstrap前端开发案例一,这篇文章能够帮助大家更还好的进行前端开发Bootstrap,相信大家会爱上Bootstrap

现在很多公司开发中都在使用bootstrap这个框架,bootstrap是Twitter公司的一个团队的作品,大大简化了我们的前端的开发。(后面会总结一些less的使用)
学习使用API我建议直接查看官网的API,地址:http://www.bootcss.com/
下面是部分目标效果图:

下面我就总结一个小Demo中的技巧和原理:
第一步http://www.bootcss.com/下载bootstrap的压缩包,新建index.html,使用sublime或其它编辑器打开index页面,解压后目录是

 

第二步、拷贝官网http://v3.bootcss.com/getting-started/的一个基本模板,方便后续的开发,

   Bootstrap 101 Template 

你好,世界!

1)、注意:jquery.js的引用一定要在bootstrap.min.js的前面,并且最好手动下载一个jquery.js,放在js路径下,
 因为后来我在仿真的时候发现下拉和carousel的动画效果都没有了,发现基本模板的jquery文件是下载的,可能没有联网,所以没有下载下来,最好自己引用本地。
  2)、注意:css引用放页面上方,js引用放页面下方,因为css需要先加载渲染页面,而js需要在页面渲染完毕后加载执行;并且适应移动设备的meta语句:

第三步、导航条
1)居中效果:container-fluent需要改成container 
2)白色改成反差效果的黑色:

以上就是Bootstrap前端开发案例一的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程