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 String对象扩展HTML编码和解码的方法
Jun 02 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
如何利用node转发请求详解
Sep 17 Javascript
用webAPI实现图片放大镜效果
Nov 23 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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中将网址转换为超链接的函数
2011/09/02 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
python获取目录下所有文件的方法
2015/06/01 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
详解Python的三种可变参数
2019/05/08 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
python 实现逻辑回归
2020/12/30 Python
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
函授大专自我鉴定
2013/11/01 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
社会公德演讲稿
2014/05/20 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
微信小程序调用python模型
2022/04/21 Python