第一篇初识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 相关文章推荐
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
js实现div弹出层的方法
Nov 20 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
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 json_encode奇怪问题说明
2011/09/27 PHP
基于php权限分配的实现代码
2013/04/28 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python迭代和迭代器详解
2016/11/10 Python
python队列原理及实现方法示例
2019/11/27 Python
dpn网络的pytorch实现方式
2020/01/14 Python
python logging设置level失败的解决方法
2020/02/19 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
中软Java笔试题
2012/11/11 面试题
信用社员工先进事迹材料
2014/02/04 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
解除劳动合同证明书
2014/09/26 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
一文搞懂Python Sklearn库使用
2021/08/23 Python
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
Python中requests库的用法详解
2022/06/05 Python