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 SELECT单选模拟jQuery.select.js
Nov 12 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
js实现圆形菜单选择器
Dec 03 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
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
建筑设计所实习生自我鉴定
2013/09/25 职场文书
酒店司机岗位职责
2013/12/14 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
中学生寄语大全
2014/04/03 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
医德医风学习心得体会
2016/01/25 职场文书
《包身工》教学反思
2016/02/23 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
python脚本框架webpy的url映射详解
2021/11/20 Python