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操作userdata
Apr 27 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
vuejs指令详解
Feb 07 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php简单防盗链实现方法
2015/07/29 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
Python3基础之函数用法
2014/08/13 Python
python 全文检索引擎详解
2017/04/25 Python
Python之os操作方法(详解)
2017/06/15 Python
Django在win10下的安装并创建工程
2017/11/20 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
如何在pycharm中安装第三方包
2020/10/27 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
导游词怎么写
2015/02/04 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2015最新民情日记范文
2015/06/26 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技