第一篇初识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 相关文章推荐
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
vue.js+element 默认提示中英文操作
Nov 11 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 缓存实现代码及详细注释
2010/05/16 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
JS中style属性
2006/10/11 Javascript
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
浅谈js闭包理解
2019/03/28 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
一份python入门应该看的学习资料
2018/04/11 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
网络宣传方案
2014/03/15 职场文书
人力资源管理求职信
2014/08/07 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
离婚起诉书范本
2015/05/18 职场文书
论文答辩开场白大全
2015/05/27 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
Pandas搭配lambda组合使用详解
2022/01/22 Python
mysql 获取相邻数据项
2022/05/11 MySQL