bootstrap的学习注意点】的更多相关文章

转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 可同button结合使用 alert 组件中所包含的图标是用来表示这是一条错误消息的. <div class="alert alert-danger" role=&quo…
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="dropdown"]'//属性标记 Dropdown = function(){} //构造器 Dropdown.prototype = {} // 构造器的原型 function clearMenus() // 自定义方法 $.fn.dropdown = function ( option ){}//jQ…
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} //构造器 Modal.prototype = function(){} //构造器的原型 function ..(){} //自定义方法 $.fn.modal = function(){} //在jQuery对象上自定方法 $.fn.modal.defaults = {} //设置默认属性 $.fn.…
[Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap插件示例 [Bootstrap基础学习]02 Bootstrap的布局组件应用示例 [Bootstrap基础学习]01 Bootstrap的CSS [Bootstrap基础学习]00 序  …
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[导航条.分页导航](五)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="http://libs.…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[菜单.按钮.导航](四)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="http://libs.…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[网格系统](三)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="pa…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[表单](二)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="padd…
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>bootstrap基础学习(一)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript&quo…
很早之前就听说过less了,但是一直拖着没去学习.最近抽空看了less,其实语法很简单,看一遍基本就知道怎么用了.平时自己写页面用less的话,感觉是方便了些,但是难道less的好处就只是这样? 刚好最近也在学习bootstrap,发现其源文件就是用less写的,看了之后,我才深深体会的less的好处与强大,对less也有了更深一层的理解. 1.Less是什么? LESS CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.…
转自http://v3.bootcss.com/javascript/ bootstrap javascript插件学习 模态框 打开模态框 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal</button> data-tog…
排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都是10px.2.所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体.3.固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px. 代码 <!DOCTYPE HTML> <…
<!DOCTYPE html> <html> <head> <title>柠檬学院</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=…
先看bootstrap.typehead.js的结构 var Typeahead = function ( element, options ){} //构造器 Typeahead.prototype = {} //构造器的原型 $.fn.typeahead = function ( option ){} //jQuery原型上自定义方法 $.fn.typeahead.defaults ={} //默认参数 $.fn.typeahead.Constructor = Typeahead //重写j…
先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = {} // 构造器原型 $.fn.carousel = function ( option ) {} //jQuery原型上自定义的方法 $.fn.carousel.defaults ={} //默认参数 $.fn.carousel.Constructor = Carousel // 重写jQuery…
先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype = {} //构造器的原型 $.fn.collapse = function ( option ){} //jQuery原型上自定义的方法 $.fn.collapse.defaults = {} // 默认参数 $.fn.collapse.Constructor = Collapse // 重写jQ…
我们先看bootstrap.alert.js的结构 var dismiss = '[data-dismiss="alert"]' //自定义属性 Alert = function ( el ){} // 构造器 Alert.prototype ={} // 构造器的原型 $.fn.alert = function ( option ){} //jQuery原型上自定义的方法 $.fn.alert.Constructor = Alert // 重写jQuery原型方法popover的构造…
先看bootstrap.button.js的结构 var Button = function ( element, options ){} //构造器 Button.prototype = {} //构造器的原型 $.fn.button = function ( option ){} //jQuery原型上的自定义方法 $.fn.button.defaults = {} //默认参数 $.fn.button.Constructor = Button //重写jQuery原型自定义方法的构造器名…
先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} // 构造器的原型 $.fn.popover = function ( option ){} //jQuery原型上的自定义方法 $.fn.popover.Constructor = Popover //重写jQuery原型方法popover的构造器名 $.fn.popover.defaults…
先看bootstrap-tooltip.js的结构 var Tooltip = function ( element, options ){} // 构造器 Tooltip.prototype ={} //构造器的原型 $.fn.tooltip = function ( option ) {} //jQuery原型上自定义的方法 $.fn.tooltip.Constructor = Tooltip //重置jQuery原型方法tooltip的构造器名 $.fn.tooltip.defaults…
先看bootstrap.dropdown.js的结构 function ScrollSpy(){} //构造函数 ScrollSpy.prototype = {} //构造器的原型 $.fn.scrollspy = function ( option ){} //jQuery原型上的自定义方法 $.fn.scrollspy.Constructor = ScrollSpy // jQuery原型上的自定义方法 $.fn.scrollspy.defaults = {} //默认参数 $(functi…
好吧,Copy了几天,这个总结算是把我对Bootstrap的一些理解写一下吧. Bootstrap只是一套别人写好的前端框架,直接拿来用就好. 不过对于专业的前端而言,如果不去把所有的代码都看一遍来理解的话,恐怕也就只是浮于表面而已了. 学习里面的CSS和js,才是王道! 如果你只是一个和我一样的写后台的,只想浮于表面,快速应用的人,那么可以看接下来我自己写的一点用于记忆的东西.如果是前端,那么还是不要看了. 看了前面的那些章节,让我们来简单写一个用于快速上手的小列表.在这里我也只写一些最通用的…
其实这样的东西很多了,但是我就是要写. 我写这种鬼东西只是为了监督自己,如果能顺便帮一下别人就更好了. 这个系列的基础学习,不会去看实体书,主要是去看网上的资料和官网. Bootstrap就是对jQuery的一次再开发,所以jQuery脚本引用必须在bootstrap脚本之前. <link type="text/css" rel="stylesheet" href="./styles/bootstrap.min.css"/> <…
一.Bootstrap 概述      Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可用于快速.简单地构建基于 PC 及移动端设备的 Web 页面需求.      2010 年 6 月,Twitter 内部的工程师为了解决前端开发任务中的协作统一问题.经历各种方案后,Bootstrap 最终被确定下来,并于 2011 年 8 月发布.经过很长时间的迭代升级,由最初的 C…
排版——标题.副标题.段落(正文文本).强调内容.粗体.斜体.强调相关的类.文本对齐 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> </title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/cs…
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目.大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新.简洁;要素…
bootstrap经典实用案例 bootstrap经典实用案例(非常详细),从菜鸟到高手的过程是艰辛的,你渴望救助.这本教程就是你无言的助手,默默的帮你到永远. 带奋斗一起飞翔,因为有了它,让我拥有理智之思:我才使过去的失误不再重演到今天的影片里:我才能使过去的成功在人生中继续升华:我才能真正收获金秋丰硕的果实,品味人生的快乐. 出处:http://download.csdn.net/download/lzb2512/5307039 ===============================…
这篇学习网格系统(Grid System) Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1.网格选项:   超小设备手机(<768px) 小型设备平板电脑(≥768px) 中型设备台式电脑(≥992px) 大型设备台式电脑(≥1200px) 网格行为 一直是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 最大容器宽度 None (auto) 750px…
终于过完双十一,服务器顶住了压力,不知道为啥,突然的轻松,反而感觉有点无所适从,好久没写博客了,竟然发现还有人回我,很是开心,问题都是关于阿里云的,阿里云的吭确实多,其实关键在于,官方文档还是少,出了问题,很多都要靠自己去尝试,自己去找方法. 好了,今天开始学习bootstrap,自己本身是后端出身,java,php,nodejs都做过几个网站,目前负责白菜哦的全部技术,android和ios的app有时也需要自己去修改一些bug,瞬间感觉自己全能,有木有,不过直到现在,才发现之前一直鄙视的在m…
1.简介 1)  .环境配置 2)  .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQLServer做出解读) 运行环境:VS2013+MVC5.0+EF6.1+SQLServer2012 解决方案名称:AppSolution 项目名称:App.Web(UI层)与App.Models(数据访问层) -直接访问模式 提取theme下的所有文件到MVC的Content,提取admin的i…