学习教程

本站学习教程均来自于网络公开资料,并经过精心整理编辑,希望能够提高Bootstrap爱好者学习效率,尽快上手并掌握这一框架技术。(如有侵权,请通知我们删除)

bootstrap进行网页配色过程

xdouhao阅读(317)评论(0)

以企业网站颜色:蓝、红、灰,为例 (1)打开variables.less, (2)灰色变量覆盖范围,安装需求进行修改 123456@gray-base: #000; @gray-darker: lighten(@gray-base, 13.5%); // #222 @gray-dark: lighten(@gray-base, 20%); // #333 @gray: lighten(@gray-

bootstrap 常用类名

xdouhao阅读(317)评论(0)

Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签 网格选项 row :行 col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数]) col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是1到11,表示把该列的左外边距(margin)增加*列) col-*-*-*:列排

bootstrapValidator.js,最好用的bootstrap表单验证插件

xdouhao阅读(222)评论(0)

前言:做Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator。今天就来看看它如何使用吧。 一、源码及API地址 介绍它之前,还是给出它的源码以及API的地址吧。 bootstrapvalidator源码:https://github.com/nghuuphuoc/boo

通过bootstrap来学习less

xdouhao阅读(160)评论(0)

很早之前就听说过less了,但是一直拖着没去学习。最近抽空看了less,其实语法很简单,看一遍基本就知道怎么用了。平时自己写页面用less的话,感觉是方便了些,但是难道less的好处就只是这样? 刚好最近也在学习bootstrap,发现其源文件就是用less写的,看了之后,我才深深体会的less的好处与强大,对less也有了更深一层的理解。 1、Less是什么? LESS CSS是一种动态样式语言

基于Bootstrap仿淘宝分页控件实现

xdouhao阅读(249)评论(0)

大家都应该上过淘宝的吧,没有上过淘宝的同学估计也没几个了,但是我相信大多数的人都是在淘宝上面买完东西就下线,很少有人会关注淘宝上的设计这类的,但是对于普通人这样还行,但是对于一个程序员这样就可不行了,因为博主本人是从事前端方面的工作,所以就通过仿照淘宝的设计样式,以求在技能上面能够有一个大的突破 一、淘宝分页控件了解 先上一张淘宝的分页图片: 根据上图中对淘宝分页控件的分析,我们大致上可以将淘宝分

极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg

xdouhao阅读(226)评论(0)

这篇文章主要为大家极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg,是一款基于jquery和bootstrap的可视化编辑器,感兴趣的小伙伴们可以参考一下 先来看看官方对这款编辑器的相关功能描述吧。 1、在Mac和Wndows平台上能够自动针对常用操作绑定标准热键 2、可以通过拖拽插入图片;支持图片上传(也可以获取移动设备上的照片) 3、语音识别输入(仅限Chrome浏览器)

20分钟成功编写bootstrap响应式页面 就这么简单

xdouhao阅读(360)评论(0)

这篇文章主要教大家如何在20分钟内成功编写bootstrap响应式页面,其实很简单,培养大家分分钟开发出一个高大上的页面能力,感兴趣的小伙伴们可以参考一下。 最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备。使用它编写响应式页面快捷、方便,而且屏蔽了浏览器差异。使用了 Bootstrap 后,再也无法想象过

轻松使用jQuery双向select控件Bootstrap Dual Listbox

zengsw阅读(139)评论(0)

这篇文章主要教大家如何轻松使用jQuery双向select控件Bootstrap Dual Listbox,感兴趣的小伙伴们可以参考一下。 本文主要为大家介绍了双向select控件Bootstrap Dual Listbox的使用方法,Bootstrap Dual列表是一个为响应Twitter优化的列表框插件,它可以用在所有的现代浏览器和触摸设备上,分享给大家,具体如下: 效果图: 一、使用 1、

解决JS组件bootstrap table分页实现过程中遇到的问题

yangfeng阅读(273)评论(0)

这篇文章主要介绍了JS组件bootstrap table分页实现过程中遇到的问题,感兴趣的小伙伴们可以参考一下 本文为大家分享了bootstrap-table 分页的问题,供大家参考,具体内容如下 问题1 :服务器端取不到form值,querystring没有问题,但是request.form取不到值 解决:这是ajax的问题,原代码使用原生的ajax。   1可以用读流文件解决。2 如果想用re

Bootstrap学习笔记之css组件

yangfeng阅读(316)评论(0)

这篇文章主要为大家详细介绍了bootstrap学习笔记中的css组件,感兴趣的小伙伴们可以参考一下 今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用。关于前两篇中,css样式和布局的文章,大家可以在之前的文章中阅读。  一、导航组件 自己做了个导航,目前只有一级菜单,下一篇文章中,将给出二级菜单,涉及到js的插件,所以这里不在描述。 1234567

Bootstrap图片轮播组件使用实例解析

yangfeng阅读(462)评论(0)

图片轮播组件是一个在网页中很常见的技术,这篇文章主要为大家详细介绍了Bootstrap图片轮播组件使用实例,感兴趣的小伙伴们可以参考一下 使用Bootstrap来编写图片轮播组件Carousel,则能够节约很多时间,图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需要很长的JavaScript编码,同时也不好控制大小。 同时说一下,Carousel这个词的本义是回旋木马。 一、基本目

JS组件Bootstrap Select2使用方法详解

yangfeng阅读(198)评论(0)

在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性。 一些通用的单选、多选、分组等功能这里就不多做介绍了,multiselect这方面是强项。重点介绍下select2的一些特性效果: 一、特性效果 1、多选效果     可以设置最多只能选几个

JS组件Form表单验证神器BootstrapValidator

yangfeng阅读(231)评论(0)

本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下: 1、初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js组件: 1234567<script src=&

全面解析Bootstrap中transition、affix的使用方法

yangfeng阅读(189)评论(0)

这篇文章主要为大家详细解析了Bootstrap中transition、affix的使用方法,感兴趣的朋友可以参考一下 一、Transition(过滤) 作为一个基础支持的组件,被其他组件多次引用。实现根据浏览器支持transition的能力,然后绑定动画的结束事件; 首先:创建一个Element; 然后:迭代查看此元素支持的transition动画名称 Transition实现的技巧,主要是重写了

全面解析Bootstrap中tab(选项卡)的使用方法

yangfeng阅读(170)评论(0)

这篇文章主要为大家全面解析Bootstrap中tab(选项卡)的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下 源码文件: tab.js 实现原理: 1、单击一个元素时,首先将原来高亮的元素取消 2、然后给被单击元素进行高亮 3、如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5、如果定义了动画,先

全面解析Bootstrap中Carousel轮播的使用方法

yangfeng阅读(163)评论(0)

这篇文章主要为大家详细的介绍了Bootstrap中Carousel的使用方法,感兴趣的小伙伴们可以参考一下。 本文实例为大家全面的解析了Bootstrap中Carousel的使用方法,供大家参考,具体内容如下 源码文件: Carousel.scss Carousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽、高自适应 源码分析:  1、Html结构:主要分为以四

全面解析Bootstrap中nav、collapse的使用方法

yangfeng阅读(113)评论(0)

这篇文章主要为大家详细解析了Bootstrap中nav、collapse的使用方法,感兴趣的朋友可以参考一下。 一、导航分析(nav) 源码文件: _navs.scss:导航模块 Mixins/_nav-divider.scss:分隔线 Mixins/_nav-vertical-align.scss:垂直对齐 1、只是用css进行了样式修饰,对Js没有任何依赖 2、导航模块可以包含下拉模块 3、实

全面解析Bootstrap表单使用方法(表单控件)

yangfeng阅读(135)评论(0)

一、输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text。 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”] (其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。 为了让控件

全面解析Bootstrap表单使用方法(表单按钮)

yangfeng阅读(95)评论(0)

这篇文章全面解析了Bootstrap表单的使用方法,本文重点介绍Bootstrap表单按钮,感兴趣的小伙伴们可以参考一下。 一、多标签支持 一般制作按钮除了使用<button>标签元素之外,还可以使用<input type=”submit”>和<a>标签等。 同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可

全面解析Bootstrap排版使用方法(文字样式)

yangfeng阅读(109)评论(0)

这篇文章全面解析了Bootstrap排版使用方法,本文重点介绍Bootstrap排版中的文字样式设置,感兴趣的小伙伴们可以参考一下。 一、段落 段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1、全局文本字号为14px(font-size)。 2、行高为1.42857143(line-height),大约是20px(大家看到一串

全面解析Bootstrap布局组件应用

yangfeng阅读(143)评论(0)

本文示例介绍了Bootstrap布局组件应用,分享给大家供大家参考,具体内容如下 字体图标的应用示例 123<button type="button" class="btn btn-default">   <span class="glyphicon glyphicon-sort-by-attributes"&

全面解析Bootstrap中form、navbar的使用方法

yangfeng阅读(105)评论(0)

这篇文章主要为大家详细解析了Bootstrap中form、navbar的使用方法,感兴趣的朋友可以参考一下。 一、表单(Form) 源码文件: _form.scss mixins/_form.scss 1、按层次结构分:form-group -> form-control/input-group/form-static-control -> 各类标签 2、Form-group/form

全面解析Bootstrap中scrollspy(滚动监听)的使用方法

yangfeng阅读(115)评论(0)

这篇文章主要为大家全面解析Bootstrap中scrollspy(滚动侦听)的使用方法,感兴趣的小伙伴们可以参考一下。 bootstrap源码分析之scrollspy(滚动侦听) 源码文件: Scrollspy.js 实现功能 1、当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2、导航必须是 .nav > li > a 结构,并且a上href或dat

全面解析Bootstrap表单使用方法(表单样式)

yangfeng阅读(77)评论(0)

这篇文章全面解析了Bootstrap表单的使用方法,本文重点介绍Bootstrap表单样式,感兴趣的小伙伴们可以参考一下。 一、基础表单 1234567891011121314<form > <div class="form-group"> <label>邮箱:</label> <input type="email

全面解析Bootstrap排版使用方法(标题)

yangfeng阅读(124)评论(0)

这篇文章全面解析了Bootstrap排版使用方法,本文重点介绍Bootstrap标题排版,感兴趣的小伙伴们可以参考一下。 Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示: 1234567891011121314<!--Boo

全面解析bootstrap格子布局

yangfeng阅读(112)评论(0)

这篇文章全面的为大家解析了bootstrap格子布局的相关资料,感兴趣的朋友可以参考一下。 一、源码文件 _grid.scss:格子系统类文件 Mixins/_grid.scss:支持格子系统实现的mixin集合 Mixins/_grid-framework.scss:格子系统实现的核心mixin 二、支持的功能 1. 实现按百分比布局 2. 实现格子的定位 3. 实现格子的嵌套 4. 如果只使用

全面解析Bootstrap中tooltip、popover的使用方法

admin阅读(73)评论(0)

一、tooltip(提示框)  源码文件:  Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top、left、bottom、right、width、height等) 2、计算tooltip的位置,是top、left、bottom、right其中一个 3、然后根据计算的位置值,运算出坐标值 4、给tooltip应用坐标值  源码分析:

全面解析Bootstrap弹窗的实现方法

admin阅读(189)

一. 结构分析  Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮 ☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容 ☑ 弹出框脚部

Bootstrap几款好用的组件(强烈推荐)

admin阅读(316)评论(0)

前言:之前分享过很多bootstrap常用组件,包括表格、表单验证、文件上传、复选下拉框、弹出框等。这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着“好东西要与人分享”的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考。组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看

JS表格组件神器bootstrap table详解(基础版)

admin阅读(302)评论(0)

这篇文章主要介绍了JS表格组件神器bootstrap table,bootstrap table界面采用扁平化的风格,用户体验比较好,更好兼容各种客户端,需要了解更多bootstrap table的朋友可以参考下。 一、Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1、直接下载源码,添加到项目里面来。 由于Bootstrap Table是B