bootstrap学习笔记之初识bootstrap


Posted in Javascript onJune 21, 2016

Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。

bootstrap是一Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架。bootstrap提供了优雅的html和css规范,它即是由动态css语言Less写成。是Github上的热门开源项目。

它基于jQuery框架开发,在jQuery框架的基础上进行了更为人性化和个性化的完善,形成了一套自己独有的网站风格,并兼容大部分jQuery插件。

Bootstrap(1)包含了丰富的web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对话框等。(2)自带了13个jQery插件,这些插件为bootstrap中的组件赋予了生命。其中包括:模式对话框、标签页、滚动条、弹出框等。
Bootstrap中文网上对Bootstrap的描述是:

bootstrap学习笔记之初识bootstrap

Bootstrap

简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

下载:http://v3.bootcss.com/

下载之后可以看到以下目录和文件,这些文件按照类别放到了不同目录中。并且提供了压缩与未压缩两种版本。

下载压缩包之后,将其解压缩到任意目录即可看到以下目录结构:

这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。

基本模板

使用以下给出的这份超级简单的HTML模版,或者修改这些案例。建议对这些案例按照自己的需求进行修改,而不要简单的复制、粘贴。

拷贝并粘贴下面给出的HTML代码,这就是一个最简单的Bootstrap页面了。

<!DOCTYPE html> 
<html> 
<head> 
<title>Bootstrap 101 Template</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- Bootstrap --> 
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> 
<!-- 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.0/html5shiv.min.js"></script> 
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script> 
<![endif]--> 
</head> 
<body> 
<h1>Hello, world!</h1> 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> 
</body> 
</html>

以上所述是小编给大家介绍的bootstrap学习笔记之初识bootstrap的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
js获取指定日期前后的日期代码
Aug 20 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
Javascript实现简易天数计算器
May 18 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 #Javascript
Javascript类型系统之String字符串类型详解
Jun 21 #Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 #Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 #Javascript
jQuery获取元素父节点的方法
Jun 21 #Javascript
JS图片定时翻滚效果实现方法
Jun 21 #Javascript
Javascript删除指定元素节点的方法
Jun 21 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
pytyon 带有重复的全排列
2013/08/13 Python
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python对XML文件的操作实现代码
2020/03/27 Python
使用Django清空数据库并重新生成
2020/04/03 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
浅析Python中字符串的intern机制
2020/10/03 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
生物学专业求职信
2014/07/23 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
上课说话检讨书
2015/01/27 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
Python正则表达式中flags参数的实例详解
2022/04/01 Python