第一篇初识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简单表格编辑功能实现方法
Apr 16 Javascript
JavaScript中this详解
Sep 01 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
vue 解决异步数据更新问题
Oct 29 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
微信小程序实现锚点功能
Nov 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
Python中删除文件的程序代码
2011/03/13 Python
python time模块用法实例详解
2014/09/11 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
详解pytorch创建tensor函数
2022/03/22 Python
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技