bootstrap学习笔记之初识bootstrap


Posted in Javascript onJune 21, 2016

Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。

bootstrap是一Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架。bootstrap提供了优雅的html和css规范,它即是由动态css语言Less写成。是Github上的热门开源项目。

它基于jQuery框架开发,在jQuery框架的基础上进行了更为人性化和个性化的完善,形成了一套自己独有的网站风格,并兼容大部分jQuery插件。

Bootstrap(1)包含了丰富的web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对话框等。(2)自带了13个jQery插件,这些插件为bootstrap中的组件赋予了生命。其中包括:模式对话框、标签页、滚动条、弹出框等。
Bootstrap中文网上对Bootstrap的描述是:

bootstrap学习笔记之初识bootstrap

Bootstrap

简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

下载:http://v3.bootcss.com/

下载之后可以看到以下目录和文件,这些文件按照类别放到了不同目录中。并且提供了压缩与未压缩两种版本。

下载压缩包之后,将其解压缩到任意目录即可看到以下目录结构:

这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。

基本模板

使用以下给出的这份超级简单的HTML模版,或者修改这些案例。建议对这些案例按照自己的需求进行修改,而不要简单的复制、粘贴。

拷贝并粘贴下面给出的HTML代码,这就是一个最简单的Bootstrap页面了。

<!DOCTYPE html> 
<html> 
<head> 
<title>Bootstrap 101 Template</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- Bootstrap --> 
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> 
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script> 
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script> 
<![endif]--> 
</head> 
<body> 
<h1>Hello, world!</h1> 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> 
</body> 
</html>

以上所述是小编给大家介绍的bootstrap学习笔记之初识bootstrap的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
理解JavaScript的变量的入门教程
Jul 07 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 #Javascript
Javascript类型系统之String字符串类型详解
Jun 21 #Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 #Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 #Javascript
jQuery获取元素父节点的方法
Jun 21 #Javascript
JS图片定时翻滚效果实现方法
Jun 21 #Javascript
Javascript删除指定元素节点的方法
Jun 21 #Javascript
You might like
How do I change MySQL timezone?
2008/03/26 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php 伪静态之IIS篇
2014/06/02 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
浅谈js的异步执行
2016/10/18 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python是怎么被发明的
2020/06/15 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
Linux上比较文件的命令都有哪些
2012/02/24 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
生产主管岗位职责
2013/11/10 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
车间安全生产标语
2014/06/06 职场文书
生物技术专业求职信
2014/06/10 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
运动会广播稿300字
2015/08/19 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
maven依赖的version声明控制方式
2022/01/18 Java/Android
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers