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滚动字幕效果实现代码
Jun 22 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
js操作滚动条事件实例
Jan 29 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 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调用三种数据库的方法(2)
2006/10/09 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python__new__内置静态方法使用解析
2020/01/07 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
python中pdb模块实例用法
2021/01/15 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
创业计划书的内容步骤和要领
2014/01/04 职场文书
党支部工作总结2015
2015/04/01 职场文书
2019年工作总结范文
2019/05/21 职场文书