第一篇初识bootstrap


Posted in Javascript onJune 21, 2016

Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。

Bootstrap(1)包含了丰富的web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对话框等。

(2)自带了13个jQery插件,这些插件为bootstrap中的组件赋予了生命。其中包括:模式对话框、标签页、滚动条、弹出框等。

Bootstrap是twitter的工程师在业余时间开发的,在最大最流行的开源站点github上开源以后讯速成为该网站上更新最频繁的项目,大量工程师踊跃为该项目贡献代码,短时间内涌现出大量使用bootstrap搭建的网站。何以bootstrap发展速度会如此惊人呢?这主要得益于bootstrap的优秀特性:

移动设备优先:将针对移动的特性放在了首位

浏览器支持:所有的主流浏览器都支持 Bootstrap

容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap

响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它包含了功能强大的内置组件,易于定制

下面我们来看用bootstrap搭建出来的最简单的一个页面。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小,查看响应式效果!</p> 
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3> 
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
</div>
</div>
</div>
</body> 
</html>

以上所述是小编给大家介绍的第一篇初识bootstrap的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 #Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 #Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 #Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 #Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 #Javascript
Javascript类型系统之String字符串类型详解
Jun 21 #Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 #Javascript
You might like
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
jQuery 操作XML入门
2008/12/25 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书