第一篇初识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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
vue监听键盘事件的相关总结
Jan 29 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 foreach循环使用详解与实例代码
2010/05/08 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python正则表达式使用范例分享
2016/12/04 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
Python 如何展开嵌套的序列
2020/08/01 Python
一个入门级python爬虫教程详解
2021/01/27 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
贷款委托书范本
2014/04/08 职场文书
小学数学教研活动总结
2014/07/01 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
学校中秋节活动总结
2015/03/23 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers