废话不多说了，直接给大家贴代码了，具体代码如下所示： <!--响应式导航部分--> <header role="banner"> <nav role="navigation" class="navbar navbar-static-top navbar-default"> <div class="container "> <div class="navbar-header"> <!--设置手风琴式的navbar，然后类navbar-toggle包装在屏幕大于992px，隐藏--> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <!-...
本文实例为大家分享了Bootstrap进度条的具体代码，供大家参考，具体内容如下 基本结构 <div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"><span class="sr-only">40% 完成</span></div> </div> 默认的进度条： 创建一个基本的进度条的步骤如下： （1）添加一个带有 .progress 的 <div>。 （2）在上面的 <div> 内，添加一个带有...
将介绍如何用AngularJS构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，AngularJS能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。 本文将介绍如何实现多限级导航菜单。目录 1.静态多级菜单实现 2.动态多级菜单...
大家都应该上过淘宝的吧，没有上过淘宝的同学估计也没几个了，但是我相信大多数的人都是在淘宝上面买完东西就下线，很少有人会关注淘宝上的设计这类的，但是对于普通人这样还行，但是对于一个程序员这样就可不行了，因为博主本人是从事前端方面的工作，所以就通过仿照淘宝的设计样式，以求在技能上面能够有一个大的突破 一、淘宝分页控件了解 先上一张淘宝的分页图片：根据上图中对淘宝分页控件的分析，我们大致上可以将淘宝分页控...
首先关键一句话： $(".js-example-tags").select2({ tags: true }) 别小看此代码功能可谓强大，在需要的地方直接加进去class如下代码所示： <div class="form-group required"> <label class="control-label col-sm-4">测试select2: </label> <div class="col-sm-8"> <form:select path="sett" id="sett" class="form-control required js-example-tags" onchange="onchange(${sett.costAmount},${sett.id});"> <form:option value...
实际的项目网站中或多或少的或用到多选框，我选用的一款是 Bootstrap Multiselect。 官方文档：http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html 如果你英文好一点，里面有详细的介绍，多选框的设置，多选框获取值/文本，选项分组，各种各样丰富的表现方式和获取。 结合实际项目，加深技术理解，同时也方便自己后续项目中的使用。 多选框和单选框相同，实际项目中前端不可能将里面...
使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~ 首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成了一个JQuery插件，在dropdown代码段中找到了关...
导航中图标，表单的编程： <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet"> <link href="http://cdn.bootcss.c...
下面代码实现别忘了前提是要在bootstrap框架下使用 一、效果 点击模态框跳出自己已做好的MP4等格式视频二、Bootstrap代码 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">模态框</button><div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"><div class="modal-dialog modal-lg" role="document"><div class=...
我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的. 假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框；点击B时显示图像上传框,隐藏文本输入框,请问怎么实现? 用firebug调试的时候发现只有在加载html页面的时候几个click函数才会执行,页面加载好后点击下拉菜单项,这些断点都不会被执行,求解是怎么回事. 我的js代码如下(定义在<head>部...
1、数据处理首先在动态js中，根据url参数获取数据库文档的数量，设置分页的大小，获取当前页面的数据，然后将文档数量pagecount，分页大小pagesize，以及当前页面currentpage传递到页面中。2、处理分页效果我采用的是JavaScript动态生成的，你也可以利用ejs支持函数的特性将其封装后生成html形式的分页。首先，添加分页ul，在你的页面中需要显示的位置添加代码：<ul class="pagination" id="pagination"> </ul>然后在script标签中插...
前言：前天刚写了篇JS组件Bootstrap Table表格行拖拽效果，今天接到新的需要，需要在之前表格行拖拽的基础上能够同时拖拽选中的多行。用了半天时间研究了下，效果是出来了，但是感觉不尽如人意。先把它分享出来，以后想到更好的办法再优化吧。一、效果展示1、拖动前2、拖动中3、拖动后4、撤销回到拖动前状态二、需求分析通过上篇我们知道，如果要实现拖拽，必须要有一个可以拖拽的标签，或者叫容器，比如上篇里面的tr就是一个拖拽的...
一、业务需求及实现效果项目涉及到订单模块，那天突然接到一个需求，说是两种不同状态的订单之间要实现插单的效果，页面上呈现方式是：左右两个Table，左边Table里面是状态为1的订单，右边Table里面是状态为2订单，左边Table里面的行数据拖动到右边Table里面指定行的位置，拖动完成后，左边表格减少一行，右边表格增加一行。除此之外，还需要撤销操作(相当于Ctrl + Z操作)，能够返回到上一步的状态。可能描述会让大家模拟两可，反正...
在bootstrap官方来说，导航最多就是两级，两级以上是无法实现的，大叔找了一些第三方的资料，终于找到一个不错的插件，使用上和效果上都还不错，现在和大家分享一下插件地址：http://vsn4ik.github.io/bootstrap-submenu/先看一下，在后台系统上的显示效果下面说一下实现的方式１.引用三个JS插件和一个CSS类库２.插入对应的HTML代码块,本例子没有使用递归生成代码，使用了静态的三级结构，这样看着更清晰，真正的生产环境建议使用递...
一、业务需求及实现效果 项目涉及到订单模块，那天突然接到一个需求，说是两种不同状态的订单之间要实现插单的效果，页面上呈现方式是：左右两个Table，左边Table里面是状态为1的订单，右边Table里面是状态为2订单，左边Table里面的行数据拖动到右边Table里面指定行的位置，拖动完成后，左边表格减少一行，右边表格增加一行。除此之外，还需要撤销操作(相当于Ctrl + Z操作)，能够返回到上一步的状态。可能描述会让大家模拟两可，反...