第一篇初识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中变量相关的细节分析
Aug 13 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
javascript基础知识
Jun 07 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
Angular实现响应式表单
Aug 04 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
JS+css3实现幻灯片轮播图
Aug 14 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
javascript 文档的编码问题解决
2009/03/01 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
深入浅析python继承问题
2016/05/29 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python 检查文件mime类型的方法
2018/12/08 Python
Django框架模板介绍
2019/01/15 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
中学门卫岗位职责
2013/12/26 职场文书
初中地理教学反思
2014/01/11 职场文书
仓库规划计划书
2014/04/28 职场文书
拉歌口号大全
2014/06/13 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
公务员个人考察材料
2014/12/23 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python