BOOTSTRAP3 - 技术教程文章
bootstrap3中container与container_fluid外层容器详解
本文主要介绍了ootstrap3中container与container_fluid的区别,.container与.container_fluid是bootstrap中的两种不同类型的外层容器。需要的朋友可以参考下，希望能帮助到大家。.container与.container_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是： .container 类用于固定宽度并支持响应式布局的容器。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。所谓固定宽度...
Bootstrap3多级下拉菜单实例
Bootstrap 虽好，但对于复杂的界面，还是有N多组件需要自己扩展，并且要往简洁、大气的Bootstrap界面上靠，着实要费一些功夫。下面分享一个Bootstrap 3的多级下拉菜单，无需第三方Js脚本，复制后直接可用。【相关视频推荐：Bootstrap教程】<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多级下拉菜单示例</title> <script type="text/javascript" src="http://libs.baidu.com/jquery...
详解bootstrap3-dialog-master模态框用法【图】
这篇文章主要为大家详细介绍了bootstrap3-dialog-master模态框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 bootstrap3-dialog-master是一款高效，灵活的模态框，此处为基本知识！1、源码地址https://github.com/nakupanda/bootstrap3-dialog2、效果展示3、示例代码所需引入的js和css<link rel="stylesheet" type="text/css" href="css/bootstrap-dialog.css" rel="external nofollow" > <link rel="stylesheet"...
Bootstrap3制作搜索框样式的方法
Bootstrap3中的很多样式，都是需要我们进行摸索着学习的，在制作类似百度的素搜索框时，一开始会不知道怎么做，其实很简单，利用内联图标方式就可以实现<div class="input-group"> <input type="text" class="form-control input-lg"><span class="input-group-addon btn btn-primary">搜索</span> </div>通过.input-group将span内联到输入框，我们只需要在这个span上面加上按钮的样式，就可以实现一个很不错的搜索框。以上所述是小...
学习使用bootstrap3栅格系统_javascript技巧【图】
一、bootstrap开发环境搭建 1. 下载bootstrap, http://www.bootcss.com/ 2. 下载jquery, 通过IE直接访问http://code.jquery.com/jquery-2.0.3.min.js 3. 在html页面中导入bootstrap与jquery的js,css文件，.viewport的标签，这个标签可以修改在大部分的移动设备上面的显示，加如 if lt IE 9...等是为了在ie9以下的兼容。 模板如下Insert title here二. 栅格系统 1. boostrap把桌面分隔成 由12行 * n 列的表格进行布局， 这是boostr...
基于bootstrap3和jquery的分页插件_jquery
自己写的一款基于bootstrap3和jquery的分页插件，初学jquery插件写法，写的很一般。拿出来献丑了。/** * 基于bootstrap3的jquery分页插件 * 调用方式分两种 * 1.直接调用法 * 普通大小 * $.mypage(id,now,max,fn); * 大尺寸 * $.mypagelg(id,now,max,fn); * 小尺寸 * $.mypagesm(id,now,max,fn); * * 参数说明：id为放置分页容器的ID，now为当前页，max为最大页，fn为回掉函数，回掉函数有一个参数为点击的页码 * * 2.选择...
bootstrap3兼容IE8浏览器！_javascript技巧
近期在使用bootstrap这个优秀的前端框架，这个框架非常强大，框架里面有下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等,bootstrap都已经预先定义好了，当我们制作网页上，只需直接调用里面的css即可bootstrap是一个响应式的布局，你可以在宽屏电脑、普通电脑，平板电脑，手机上都得到非常优秀的布局体验。这种响应式的布局正是通过CSS3的媒体查询（Media Query）功能...
bootstrap3中container与container_fluid外层容器的区别讲解
.container与.container_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是：.container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 所谓固定宽度并不是允许开发者自己设置容器的宽度，而是bootstrap内部根据屏幕宽度利用媒体查询，帮我们设置了固定宽度，并且是能够自适应的。 度，并且是能够自适应的。无论何种情况下，请不要手动...
vue2.0与bootstrap3实现列表分页效果
本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下 直接引入vue的js文件进行页面渲染分页，不是vuex的哦，以下源码可以直接运行哟^_^<!DOCTYPE html> <html><head><meta charset="utf-8"><title>使用vue2.0与bootstrap3进行简单列表分页</title><link href="http://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet"><script type="text/javascript" src="https://cn.vuejs.org/js/vue....
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 $(function () {$(".dropdown").mouseover(function () {$(this).addClass("open");});$(".dropdown").mouseleave(function(){$(this).removeClass("open");}) })总结 以上所述是小编给大家介绍的...
bootstrap3-dialog-master模态框使用详解【图】
bootstrap3-dialog-master是一款高效，灵活的模态框，此处为基本知识！ 1、源码地址https://github.com/nakupanda/bootstrap3-dialog 2、效果展示3、示例代码 所需引入的js和css<link rel="stylesheet" type="text/css" href="css/bootstrap-dialog.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" > <script type="text/javascript" src="js/jquery-1....
bootstrap3使用bootstrap datetimepicker日期插件【图】
没用过bootstrap2，所以之间的差异不清楚，但是看往上基本上都是说bootstrap2与bootstrap-datetimepicker的使用，之间会有不同，所以写下记录，如有不对之处，还请指正！ 网上下载bootstrap-datetimepicker-master.zip(bootstrap-datetimepicker日期插件),bootstrap3.x 用法： 1.引入css文件 <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../css/bootstrap-datetimepicker.min.c...
bootstrap3 dialog 更强大、更灵活的模态框【图】
用过bootstrap框架的同学们都知道，bootstrap自带的模态框用起来很不灵活，可谓鸡肋的很。但nakupanda开源作者封装了一个更强大、更灵活的模态框——bootstrap3-dialog。 一、源码下载 bootstrap3-dialog git下载地址 二、效果展示 1.error警告框2.confirm确认选择框3.Success提示框4.ajax加载远程页面弹出框5.ajax加载自定义页面弹出框三、使用方法 bootstrap3-dialog的demo中已有很详细的介绍，但对于初学者来说是个麻烦，还要一...
Bootstrap3 多个模态对话框无法显示的解决方案【图】
今天帮同事调了一个代码，他们的项目最近在用Bootstrap做开发，突然间，他遇到了一个奇怪的问题，如果一个页面中，有多个Modal对话框的话，排列在第一个的对话框，能够正确显示，第二个，只能导致页面出现MASK层，却不能显示Dialog. 如果调整顺序，仍然是第一个能显示，第二个只有页面变暗。效果如下： 第一个，正常弹出的Dialog第二个无法弹出，只是页面变暗的dialog而两个dialog的代码是完全一致的，具体的代码如下： <div class...
Bootstrap3 模态框使用实例
不支持同时打开多个模态框 务必尽量将HTML代码放置在模态框的body位置以避免其他组件影响模态框 *autofocus 对于模态框无效, 需要自己调用 $(#myModal).on(shown.bs.modal, function () {$(#myInput).focus() })*实例 静态 <div class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismi...
angular和BootStrap3实现购物车功能【图】
一、页面搭建 1、html结构 采用BootStrap3来快速创建一个购物车表单样式。 主要功能： A：列表数据所示 B：增加删除端口 C：清空购物车 D：商品数量的增减 E：动态计算商品价格以及总价<!DOCTYPE html> <html lang="en" ng-app="app"> <head><meta charset="UTF-8"><title>购物车</title><link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"><script src="../vendor/angular.js"></script><script src="car...
BootStrap3中模态对话框的使用
1.引入jQuery.min.js； 2.引入bootstrap-modal.js； 3.操作按钮：<a href="#edit" data-toggle="modal">修改</a> 4.模态框 <div class="modal fade" id="edit"><div class="modal-dialog "><div class="modal-content"><div class="modal-header"> <h3 class="modal-title">头标题</h3> <a class="close" data-dismiss="modal"><span>关闭</span></a></div><div class="modal-body">内容</div><div class="modal-footer"><!--脚-...
Bootstrap3 图片（响应式图片&图片形状）【图】
本文是Bootstrap3基础系列教程，最后一篇文章，后面还会在写进阶的文章，加个关注吧，还会有好的文章奉献而来的。 响应式图片 在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性，从而让图片在其父元素中更好的缩放。 SVG 图像和 IE 8-10 在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。...
Bootstrap3 多选和单选框(checkbox)
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。 设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。 默认外观（堆叠在一起） <div class="checkbox"><label><input typ...
Bootstrap3 内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。 <label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox-inline"><input type="checkbox" id="inlineChe...
BootStrap3使用错误记录及解决办法
错误内容： glyphicons-halflings-regular.svg文件出错如下， The content of element type "font-face" is incomplete, it must match "((font-face-src,(desc|title|metadata)*)|((desc|title|metadata) +,font-face-src,((desc|title|metadata))*?))". 解决办法： 源代码： <font-face units-per-em="1200" ascent="960" descent="-240"/>修改成： <font-face units-per-em="1200" ascent="960" descent="-240"><font-face-src>...
AngularJs中Bootstrap3 datetimepicker使用实例【图】
关于datetimepicker的使用，参考：//www.gxlcms.com/article/99896.htm在AngularJs中使用实例：HTML代码：<div class="container" ng-app="myApp" ng-controller="myCtrl"> <div class="row"> <div class=col-sm-6> <div class="form-group"> <label>选择日期：</label> <!--指定 date标记--> <div class=input-group date datetimepicker id=datetimepicker1> <input type=text class="form-control" ng-model="dateOne"/> <span ...
Bootstrap3 Grid system原理及应用详解【图】
刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题： 我的页面中有这样一个布局我希望当屏幕的宽度小于他们俩宽度之和的时候，右边的部分会掉下来，他们垂直摆放。 而我用col-xs-6的话，右边的盒子永远都不会掉下来。文字就变得这么丑。 如果我用col-sm-6的话,右边的盒子又会太早掉下来。此时的屏幕宽度是766px，他就已经堆叠排放了，两边留下了大片空白，还是很丑。 而Bootstarp没有提供中间的选项了。 想要解决这个问题...
购物车前端开发（jQuery和bootstrap3）【图】
作为一名不在软件公司工作的软件工程师，不仅要会写后台代码(PHP/JAVA/SQL...)，还是兼顾前端工程师的工作(html/javascript/css...)。下面就来分享一个在实际工作项目中使用到的购物车的前端开发。 这里分享的仅仅是针对购物车的操作(产品数量的增加减少，删除购物车中产品项)，假设购物车中已经放有若干产品。闲话少说，先上两张效果图。HTML代码如下：这里使用到了JQuery1.11和bootstrap3 。 <!DOCTYPE html> <html> <HEADER><me...
Bootstrap3使用typeahead插件实现自动补全功能【图】
很酷的一个自动补全插件http://twitter.github.io/typeahead.js在bootstrap中使用typeahead插件，完成自动补全相关的文档：https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md数据源：Local：数组prefectch：jsonremote等方式 --------------------------------------------------------------------------------html： <input id="orderNo" class="typeahead" placeholder="Countries" type="text" cl...
Bootstrap3.0建站教程(一)之bootstrap表单元素排版【图】
1、文字和输入框前后排列：代码： <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> <h2>条件查找</h2> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-4 control-label" for="select">归属地</div> <div class="col...
Bootstrap3.0学习教程之JS折叠插件【图】
过渡效果 关于过渡效果 对于简单的过渡效果，只需将transition.js和其它JS文件一起引入即可。如果你使用的是编译（或压缩）好的bootstrap.js文件，就无需再单独将其引入了。 Whats inside Transition.js是针对 is a basic helper for transitionEnd事件的一个基本助手工具，也是对CSS过渡效果的模拟。它被其它插件用来检测当前浏览器对CSS过渡效果是否支持。 折叠 对为支持折叠功能的组件，例如accordions和导航，赋予基本样式和灵...
BootStrap3学习笔记(一)之网格系统
如果显示网格，代码应类似这样： <div class="container"> <div class="row"> <div class="col-md-4"><p>Box 1</p></div> <div class="col-md-4"><p>Box 2</p></div> <div class="col-md-4"><p>Box 3</p></div> <div class="col-md-4"><p>Box 4</p></div> <div class="col-md-4"><p>Box 5</p></div> <div class="col-md-4"><p>Box 6</p></div> <div class="col-md-4"><p>Box 7</p></div> <div class="col-md-4"><p>Box 8</p></div>...
Bootstrap3学习笔记(二)之排版
在上篇文章给大家介绍了BootStrap3学习笔记(一)之网格系统 对于标题，Bootstrap已经修改了h1--h6的样式，如果需要副标题，还可以在其中使用small标记 <h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstra...
Bootstrap3学习笔记(三)之表格【图】
在上篇文章给大家介绍了 BootStrap3学习笔记(一)之网格系统 Bootstrap3学习笔记(二)之排版 只需要在table标签上使用.table类，就可以使用bootstrap默认的表格样式 如果需要行背景有交替变化，可以这样设定：代码如下: <table class="table table-striped">如果需要边框，可以这样设定：代码如下: <table class="table table-bordered">如果希望鼠标移动到内容行上有响应效果，可以这样设定：代码如下: <table class="table t...