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 event事件在IE、FF兼容性问题
Jan 01 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
Vue核心概念Action的总结
Jan 18 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
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
解析php file_exists无效的解决办法
2013/06/26 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
javascript中 try catch用法
2015/08/16 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python中的Numpy矩阵操作
2018/08/12 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
2014年转正工作总结
2014/11/08 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
中学团支部工作总结
2015/08/13 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
java设计模式--原型模式详解
2021/07/21 Java/Android
python之基数排序的实现
2021/07/26 Python