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 相关文章推荐
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
浅谈vue权限管理实现及流程
Apr 23 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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
python 域名分析工具实现代码
2009/07/15 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
利用Python爬取可用的代理IP
2016/08/18 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Python如何实现动态数组
2019/11/02 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
会计主管岗位职责范文
2013/11/08 职场文书
国际金融专业自荐信
2014/07/05 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
vue+iview实现手机号分段输入框
2022/03/25 Vue.js