后续DWZ框架准备支持响应式。为了感谢大家多年来的支持，现推出DWZ＋Bootstrap响应式临时解决方案。 源码下载地址： http://git.oschina.net/dwzteam/dwz_bootstrap bootstrap + dwz 表单验证，ajax表单提交，在文件上传的表单异步提交，错误提示表单如果很长，有错误提示时，会自动滚动到页面头部，方便看出错信息使用的时候只要在form上加一个class="required-validate" 就可以自动判断是 ajax提交还是, 文件上传提交，会...
年底没什么项目做了，整理下最近做的网站使用到的bootstrap知识 一、导入bootstrap样式和脚本 二、导航条 RenderKa CN/EN P...
导航条 导航条（navbar）和我们在上一个笔记中介绍的导航（nav）相比，就多了一个 “条” 字。其实在Bootstrap框架中他们有着一定的区别。 在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。 基础导航条 实际上，导航条和...
实现原理 栅格系统是Bootstrap中的核心，正是因为栅格系统的存在，Bootstrap才能有着如此强大的响应式布局方案。下面是官方文档中的解说： Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。 我们来理解一下这一段话，可以发现其中最重要的...
Bootstrap快速上手 一、使用Bootstrap要引用的文件 要使用Bootstrap，基本架构要引用如下文件： 最简单的页面示例代码如下： js 显示效果如下： 二、使用前要点 1、DOCTYPE Bootstrap使用了HTML5元素，所以HTML头部要加上 .... 2、viewport Width=device-width => 表示页面宽度是设备屏幕的宽度；确保网页能被不同屏幕分辨率的设备正确呈现...
bootstrap使用了很长时间，是页面快速开发的一把利器。最近，bootstrap4马上呼之欲出，春节闲来无事，就从源码层面解读下。 1. 移动优先 在移动互联网时代，很多公司都坚持移动端优先的原则，bootstrap也迎合了这种需求，具体表现在如下方面: 相对单位: % 、 rem 的大量使用 grid系统: 为了使用不同的设备，grid系统对xs、sm、md、lg、xl进行了响应式设计，通过media query做到适配 支持flexbox: mobi...
BootStrap Table的官方手册上说，onClickCell和click-cell.bs.table是一样的，但是经过测试，这两种写法的结果不一致，如果用onClickCell的方式，参数是那四个，但是一旦转换为click-cell.bs.table的方式，参数就会变成了五个，并且第一个是整个table的对象。【Linux公社 www.linuxidc.com】 所以在用这个函数的时候，要写成：bootstraptable(click-cell.bs.table,function( e, field, value, row, $element){}） 的形式才可以。...
出于学习需要，自觉得把基本的bootstrap用法自己敲一遍，对每个用法有个较清晰的印象，所以做了本篇总结，这也是一个巩固的学习过程。 可点击左边的目录，方便速查。 按钮 a,input,button都可以设置为按钮 a标签按钮 button标签按钮 a标签按钮 button标签按钮 预置样式 default样式 primary样式 success样式 info样式 warning样式 danger...
表单的处理一般都比较繁琐和枯燥，如果想简单的使用表单就可以使用Flask-WTF插件，同时我们把WTF融合到Bootstrap中这样样式的问题都自动解决了，本篇文章就为您讲解这些内容。 先要注意一点，在使用WTF的时候我们要在程序中设定一下SECRET_KEY，不然会出现"Must provide secret_key to use csrf"错误。 app.config[SECRET_KEY] = xxxx Flask-Bootstrap在前面的文章中已经讲过了，不再重复。 后台WTF编码 先看实例：...
1. Cardio Cardio是我最喜欢的一个轻量级模板。它几乎可以很少的修改的用于任何类型的业务。 2. Evento Evento 是一个事件引导广告模板的形状。它是设计精美和注意细节。 3. Photography Photography, 顾名思义,是一个伟大的摄影师的模板。它提供了一个美丽的方式展示你的照片和工作。 4. Flatfy 作为一个平面设计的粉丝,这是一个模板,我个人非常喜欢。它的清洁,简单,很好地...
Bootstrap中的表单控件状态主要有三种：焦点状态，禁用状态，验证状态。 一、焦点状态：该状态告诉用户可输入或选择东西 焦点状态通过伪类“:focus”以实现。 bootstrap.css相应源码： .form-control:focus { border-color: #66afe9; outline: 0; //删除了outline的默认样式 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px...
参考网址:http://www.4byte.cn/question/138712/bootstrap-how-to-center-vertical.html 部分参考自上面网页中的方法.用过bootstrap的同学知道,bootsrap2中可以使用栅格布局让div水平居中,那么如何让水平居中的div又垂直居中呢? Some text text text text text ..... 直接在css里面设置就可以实现居中,css代码: /*web background*/.container{ display:table; height:100%; }.row{ display: table-...
bootstrap Toggle Navigation Brand Link(current) Link Dropdown ...
说起Bootstrap，第一次接触到这个名词的时候还是同事在做自适应页面技术分享会时了解到，在之后的项目中就逐渐应用了这个前端WEB CSS框架。 参考： 起步： http://v3.bootcss.com/getting-started/ 代码规范： http://codeguide.bootcss.com/#html-syntax 全局CSS样式： ...
在bootstrap框架中将导航独立出来成为一个导航组件，根据不同的版本，可以找到相应的源码： LESS: navs.less SASS: _navs.scss 标签形导航，也称选项卡导航 标签形导航是通过.nav-tabs样式来实现的，在制作标签形导航时需要在原导航类名为.nav的容器上追加类名.nav-tabs 导航标题1 导航标题2 导航标题3 导航标题4 导航标题5 原理： 将菜单项li按...