第一篇初识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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
JS中style属性
Oct 11 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 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常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
python使用socket连接远程服务器的方法
2015/04/29 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
全球立体声:World Wide Stereo
2018/09/29 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
几个常见的软件测试问题
2016/09/07 面试题
打架检讨书500字
2014/01/29 职场文书
主持词开场白
2014/03/17 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
《凡卡》教学反思
2014/04/09 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
一文搞懂Redis中String数据类型
2022/04/03 Redis