第一篇初识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 相关文章推荐
Jquery Ajax方法传值到action的方法
May 11 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
js实现小星星游戏
2020/03/23 Javascript
python实现划词翻译
2020/04/23 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python制作动态字符图的实例
2019/01/27 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
浅析NumPy 切片和索引
2020/09/02 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
2014年党员评议表自我评价
2014/09/27 职场文书
教师节感谢信
2015/01/22 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
致运动员加油稿
2015/07/21 职场文书
2015年教师国培感言
2015/08/01 职场文书
师德师风培训感言
2015/08/03 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书