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 相关文章推荐
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
js获取ip和地区
Mar 10 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
js输出列表实现代码
2010/09/12 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
Python3实现并发检验代理池地址的方法
2016/09/18 Python
python实现学生信息管理系统
2020/04/05 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python和js交互调用的方法
2020/06/23 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
小学教学工作总结2015
2015/05/13 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
移除Selenium中window.navigator.webdriver值
2022/06/10 Python
Golang Web 框架Iris安装部署
2022/08/14 Python