技术资料收集站

前言：之前的三篇介绍了下bootstrap table的一些常见用法，发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能，前端使用原始的input type='file'这种标签，效果不忍直视，于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源，那么社区肯定有很多关于它的组件，肯定也有这种常见的上传组件吧。经过一番查找，功夫不负有心人，还是被博主找到了这个

在很多系统模块里面，我们可能都需要进行一定的数据交换处理，也就是数据的导入或者导出操作，这样的批量处理能给系统用户更好的操作体验，也提高了用户录入数据的效率。我在较早时期的EasyUI的Web框架上，也介绍过通过Excel进行的数据导入导出操作，随笔文章为《基于MVC4+EasyUI的Web开发框架经验总结（10）--在Web界面上实现数据的导入和导出》，本文基于Bootstrap的框架基础上，再

在前面介绍了一系列的《基于Metronic的Bootstrap开发框架经验总结》的随笔文章，随笔主要是介绍各个知识点的内容，对框架的总体性界面没有很好的阐述，本篇随笔主要介绍这个Bootstrap框架的总体性功能界面，介绍其中用到的知识点和整体性的界面。希望读者对框架有一个更加直观、真实的认识了解，界面设计以及相关思路可以借鉴提高，也可以对相关的内容进行相互探讨，共同提高。1、《基于Met

在前面介绍了很多篇相关的《Bootstrap开发框架》的系列文章，这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容，总体来说基本达到了一个稳定的状态，随着时间的推移可以会引入一些更好更新的内容进行完善，本篇继续这个系列，主要介绍如何实现Web页面内容的打印预览和保存操作。1、Web页面打印的问题在此之前，我一般使用比较好用的LODOP来执行打印的操作，这个在我

目录1、标题2、页面主体3、强调    a、小号文本    b、着重    c、斜体    d、对齐class    e、强调class4、缩略语5、地址6、列表    a、无序列表    b、有序列表    c、无样式列表    d、内联列表    e、描述    f、水平排列的描述1、标题HTML中的所有标题标签，

一、使用Bootstrap来完成一个上中下左中右的页面布局示例： //设置提供一个让网页居中的容器 div class="container"> //设置行，宽度固定 div class="row">　　　//网页头部 div class="col-lg-12 header"> div> div>

css框架（960grid）固宽布局（栅格布局）1、960框架特点：采用栅格布局把网页宽度固定在960px，使网页不容易变形 1、960框架的使用方法;  （1）在html文件中引入相关的外部CSS文件   （2）定义一个DIV大容器，放下整个页面：   示例：div class="container_12 header"> div> d

前台HTML:td>center>img style="height: 100px;width: 100px;" onmouseover="this.style.cursor='pointer';this.style.cursor='hand'" onmouseout="this.style.cursor='default'" src="" onclick="javascript:s

一 直接使用bootstrap，利用简单的js控制http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/非常简单，代码如下： Browse $('input[id=lefile]').change(function() {$('#photoCover').val($(thi

这里的Tree指的是树形菜单，这篇博客通过一个实例来讲解一下，在Bootstrap框架下怎么去建立一个树形菜单。前提：先添加Bootstrap和JQ的引用link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css">script src="bootstrap-

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head> title>title> link h

Bootstrap这个前端框架，在前端界可是一款大名鼎鼎的框架，使用Bootstrap不需要很强的设计能力就能设计出很漂亮的网页，这几天在开发一个创业项目，PC端web就打算使用Bootstrap来进行开发，但是又想去掉Bootstrap的响应式效果，于是乎就在网上找了教程，发现了网上的教程的效果好像不太适用了新版本，于是自己摸索了下，跟大家来一起分享下去掉Bootstrap响应式的几个步骤：

Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面，使其在各个尺寸的屏幕上表现良好。下面我们列出了如何禁用这一特性，就像这个非响应式布局实例页面一样。禁止响应式布局有如下几步：移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：。通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px

在各种Web开发过程中，对话框和提示框的处理是很常见的一种界面处理技术，用得好，可以给用户很好的页面体验，Bootstrap开发也一样，我们往往在页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据，删除则可能使用一个提示确认框，如果操作成功，我们可以使用更丰富的提示框来处理，本篇主要对比说明在Bootstrap开发中用到的这些技术要点。1、Bootstrap对话框的使用

Bootstrap文件上传插件File Input是一个不错的文件上传控件，但是搜索使用到的案例不多，使用的时候，也是一步一个脚印一样摸着石头过河，这个控件在界面呈现上，叫我之前使用过的Uploadify 好看一些，功能也强大些，本文主要基于我自己的框架代码案例，介绍其中文件上传插件File Input的使用。关于Uploadify的控件介绍，可以参考我之前的随笔介绍《基于MVC4+EasyUI的

如果您使用的是Bootstrap 3中,您可能遇到这么一个问题，你可以使用.text-center对文字居中对齐，图片却无法居中对齐，要解决这个问题你可以需要做很多事件，比如在img外加个div，再通过图片宽高大小等做调整等。但码农小兵发现Bootstrap 3中有一个非常简单的方法就能实现图片响应式的水平垂直居中对齐，把图片添加css类img-responsive center-bloc

1.框架1.1全局样式使用HTML5的doctype，scaffolding.less中定义全局样式，从2开始使用normalize.css，并使用reset.less进行简化1.2默认栅格系统940px宽12列栅格，使用row与span[NUM]的class来控制，使用offset[NUM]来控制偏移，于non-fluid可以直接嵌套，提供了四种响应式方案

看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，重新使用 Bootstrap3 实现一下，将涉及的内容也尽可能详细说明。1. 创建基本的页面我们先创建一个基本的 HTML 模板页面，使用 sublime + emmet 可以直接创建这个页面。1.1 新建一个文件， Ctrl + N1.2 保存到页面文件中，Ctrl + S，命名为 index

目录1、简介2、栅格选项3、列偏移4、嵌套列5、列排序1、简介Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。2、栅格选项bootstrap3.x使用了四种栅格选项来形成栅格系统，这

bootstrap table 封装了一套完善的数据表格组件，把下面的代码复制一下估计你需要的基本功能都有了，没有的再看看手册对比着我给的实例也能很快的熟悉了客户端html>head>    meta charset="UTF-8">    title>Bootstrap-Tabletitle>    link rel="stylesheet" href="http://

基于bootstrap的轮播广告页，带图片和文字                .carousel {            height: 500px;        }        .carousel .item {            height: 500px;        }        .carousel .item img {     

使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成

一 直接使用bootstrap，利用简单的js控制http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/非常简单，代码如下：[html] view plain copy input id="lefile" type="file" style="

最近一直很多事情，博客停下来好久没写了，整理下思路，把最近研究的基于Metronic的Bootstrap开发框架进行经验的总结出来和大家分享下，同时也记录自己对Bootstrap开发的学习研究的点点滴滴，希望在开一个《基于MVC4+EasyUI的Web开发框架经验总结》的系列文章，逐步介绍这个响应式框架的点点滴滴。Bootstrap是一个前端的技术框架，很多平台都可以采用，JAVA/PHP

在上篇《基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理》介绍了Bootstrap开发框架的一些基础性概括，包括总体界面效果，以及布局、菜单等内容，本篇继续这一主题，介绍页面内容常用到的数据分页处理，以及Bootstrap插件JSTree的使用。在数据的界面显示当中，表格数据的展示以及分页是非常常见的处理操作，利用Bootstrap的样式布局，以及JQuer

在上篇《基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用》介绍了数据的分页处理，使用了Bootstrap Paginator插件，另外对树形列表，采用了JSTree插件，本篇继续介绍在编辑页面中常用到的控件Select2，这个控件可以更加丰富传统的Select下拉列表控件，提供更多的功能和更好的用户体验。1、Select2控件介绍

在前面的一篇随笔《基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理》介绍了菜单模块的处理，主要介绍如何动态从数据库里面获取记录并构建菜单列表。其中菜单信息的图标样式，也是从数据库里面获取的，因此要求我们能够动态取得Bootstrap里面的各种图标定义了。本篇主要介绍如何提取Bootstrap的图标信息，存储到数据库里面为我所用。1、菜单的显示及各种B

本篇介绍如何使用bootstrap fileinput.js（最好用的文件上传组件）来进行图片的展示，上传，包括springMVC后端文件保存。一、demo 二、插件引入link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" />scrip