第一篇初识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插件 大家可以收藏一下
Feb 07 Javascript
再探JavaScript作用域
Sep 24 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 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
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
详解vue渲染函数render的使用
2017/12/12 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Python pymsql模块的使用
2020/09/07 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
上课睡觉检讨书
2014/01/28 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
房产委托公证书
2014/04/08 职场文书
股东协议书
2014/04/14 职场文书
理财学专业自荐书
2014/06/28 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
MySQL中order by的使用详情
2021/11/17 MySQL