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 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
javascript中indexOf技术详解
May 07 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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
实用函数8
2007/11/08 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
JavaScript 的继承
2011/10/01 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
基于python实现百度翻译功能
2019/05/09 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Numpy数组的广播机制的实现
2020/11/03 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
怎样声明子类
2013/07/02 面试题
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
大学优秀班主任事迹材料
2014/05/02 职场文书
精神文明单位申报材料
2014/05/02 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
浅析JavaScript中的变量提升
2022/06/01 Javascript