第一篇初识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中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
js的对象与函数详解
Jan 21 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 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
PHP的ASP防火墙
2006/10/09 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
网页自动跳转代码收集
2009/09/27 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python编写检测数据库SA用户的方法
2014/07/11 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
使用python进行拆分大文件的方法
2018/12/10 Python
python实现维吉尼亚算法
2019/03/20 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
酒店副总经理岗位职责范本
2014/02/04 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
学雷锋宣传标语
2014/06/25 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
同意转租证明
2015/06/24 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python