第一篇初识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 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
微信小程序rich-text富文本用法实例分析
May 20 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版自动生成文章摘要
2008/07/23 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
详解react如何在组件中获取路由参数
2017/06/15 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python实现人脸识别代码
2017/11/08 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
python tqdm库的使用
2020/11/30 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
个人自我评价分享
2013/12/20 职场文书
项目采购员岗位职责
2014/04/15 职场文书
八项规定整改方案
2014/10/01 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书