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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 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读取MySQL数据代码
2008/06/05 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
无故旷工检讨书
2014/01/26 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
开展创先争优活动总结
2014/08/28 职场文书
学习党章的体会
2014/11/07 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS