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 相关文章推荐
js+css在交互上的应用
Jul 18 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
javascript实现留言板功能
Feb 08 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
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
javascript的事件描述
2006/09/08 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
js实现网页随机验证码
2020/10/19 Javascript
python中文乱码的解决方法
2013/11/04 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python实现宿舍管理系统
2019/11/22 Python
python返回数组的索引实例
2019/11/28 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
全国文明单位申报材料
2014/05/31 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
通知的格式范文
2015/04/27 职场文书
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers