BOOTSTRAP - 技术教程文章
Bootstrap（笔记）【代码】【图】
Bootstrap官网：可以下载最新版本的bootstrap框架，源码。或者直接使用bootstrap官方提供的CDN链接，在页面中引用官方CDN的路径即可。Bootstrap中的JS插件依赖于jQuery,因此jQuery要在bootstrap之前引用。基本的HTML模板<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap的HTML...
bootstrap的Hello World【代码】
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://cdn.bootcss.com...
JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）【代码】【图】
原文:JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）前言：前面介绍了两篇关于bootstrap table的基础用法，这章我们继续来看看它比较常用的一些功能，来个终结篇吧，毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实，博主挑选了一些自认为比较常用的功能在此分享给各位园友。源码也在这篇统一给出。好了，不多说废话，开始我们的干货之旅吧。bootstrap table系列：...
分享六个基于Bootstrap的实用开发教程和模板演示
关于Bootstrap，相信大家一定不陌生，它已经成为现在主流产业的一个重要工具，Bootstrap提供了优雅的HTML和CSS规范，它基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。今天，我们带来6款Bootstrap实现的几款小应用，希望可以对你们有所帮助！移动为先的Bootstrap3 在线演示Bootstrap3已经发布好几周了， 现在该是我们看看Bootstrap有什么新鲜...
解决Bootstrap模态框切换时页面抖动 or页面滚动条【代码】
Bootstrap为了让所有的页面（这里指内容溢出和不溢出）显示效果一样，采取的方法如下：当Modal显示时，设置body -- overflow:hidden;margin-right:15px;（设置15px是因为浏览器的滚动条占位是15px）;（通过在modal显示时给body添加.modal-open类实现） 设置modal -- overflow:auto;overflow-y:scroll;这样设置的效果是： (1)当页面内容超出（即页面本身存在滚动条），则moda弹出后，原body滚动禁止，body的margi...
BootStrap应用案例【代码】
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Bootstrap Template</title><meta name="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" type="text/css"href="../bootstrap3/css/bootstrap.css"><link rel="stylesheet" type="text/css"href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/><lin...
Bootstrap3基础教程 01 概述【代码】
移动设备优先是 Bootstrap 3 的最显著的变化。 基础的页面：<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--告诉IE浏览器用最新的引擎--><meta name="viewport" content="width=device-width, initial-scale=1"><!--响应式布局--><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/><!--bootstrap样式--><title></title></head><body><div class="con...
bootstrap-翻页-对齐链接【代码】【图】
说明两端对齐示例<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href=...
bootstrap 下拉菜单(dropdown)插件
使用下拉菜单的插件，您可以向任何组件(比如：导航栏，标签页，胶囊式导航，按钮)添加下拉菜单用法您可以切换下拉菜单(dropdown)插件隐藏内容1、通过data属性，向链接或按钮添加data-toggle="dropdown"来切换下拉菜单。<div class="dropdown"> <a href="#" data-toggle="dropdown">下拉菜单触发器</a> <ul class="dropdown-menu"role="menu"> <li><a href="#">Html5</a></li> <li><a href="#"...
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
Bootstrap3 是移动设备优先的原则开发的。1.没有正确调用远程地址即只要是IE9以下，就调用两个专门的js<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->但是我测试发现仅仅使用以上...
bootstrap 不得不说的sass
你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。各种"CSS预处理器"之中，我自己最喜欢SA...
angular的bootstrap方法【代码】
使用 angular 写程序的开发都知道，要想使用 angular 应用能够运行，需要在页面中 “登录” 它，我们常用的方法是这样的：<!DOCTYPE html><html ng-app=‘myApp‘><head><meta charset=‘utf-8‘><script src=‘angular.js‘></script></head><body><div id=‘text‘ ng-controller=‘myCtrl‘></div><script>var app = angular.module("myApp",[]);app.controller("myCtrl",function($scope){console.log(1);})</script></body></...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：块级按钮(拉伸至父元素100%的宽度)【代码】【图】
<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><div class="container"><h2>按...
较完整的angularjs+bootstrap应用程序接口controller
define(["app"],function(app){ return app.controller("transactionsFundController", function($scope,$compile,$location) { $scope.transactionsFund={};//定义对象 $scope.transactionsFundList=[];//定义对象数组 $scope.pages = 1; //默认查询总页数 $scope.size = 0; //默认每页显示条数 $scope.total = 0; //清空模态框 $(".modal").on("hidden.bs.modal",functio...
bootstrapTable
<div class="box-body table-responsive no-padding" style="overflow-x:hidden"> <table class="table table-bordered table-hover table-text" id="menutable"> </table> </div><!-- /.box-body --> $(function() { $("#menutable").bootstrapTable({ url: ‘${ctx }/system/menu/findMainMenu‘, method: ‘get‘, detailView: true...
Bootstrap(v3.2.0)模态框(modal)垂直居中【代码】
Bootstrap(v3.2.0)模态框(modal)垂直居中方法：在bootstrap.js文件900行后面添加如下代码，便可以实现垂直居中。 that.$element.children().eq(0).css("position", "absolute").css({"margin":"0px","top": function () {return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px";},"left": function () {return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";}...
JavaEE框架Bootstrap HTML5 jQuery SpringMVC maven mybatis shiro ehcache SSH SSM【图】
获取【下载地址】? ?QQ: 313596790? ?【免费支持更新】A 代码生成器(开发利器);全部是源码??? ?增删改查的处理类，service层，mybatis的xml，SQL( mysql? ?和oracle)脚本,? ?jsp页面 都生成? ?就不用写搬砖的代码了,生成的放到项目里，可以直接运行B 阿里巴巴数据库连接池druid;??数据库连接池??阿里巴巴的 druid。Druid在监控、可扩展性、稳定性和性能方面都有明显的优势C 安全权限框架shiro ;??Shiro 是一个用 Java 语言实现的框...
bootstrap 动态添加验证项【代码】
bootstrap 中的bootstrapValidator可以对前端的数据进行验证，但是有的时候我们需要动态的添加验证，这样需要我们动态的对bootstrapValidator的内容做修改。 传统的bootstrapValidator验证是 $(‘#MaintainEntryForm‘).bootstrapValidator({message: ‘输入值无效！‘,feedbackIcons: {valid: ‘glyphicon glyphicon-ok‘,invalid: ‘glyphicon glyphicon-remove‘,validating: ‘glyphicon glyphicon-refresh‘},fields: {Spe...
bootstrap做的导航【代码】【图】
顶部导航：nav-tabs左边导航：nav-list响应式布局：div嵌套 ~ container、row、ol-lg-X效果：源码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>1</title><link rel="stylesheet" href="dist/css/bootstrap.css"/><link rel="stylesheet" href="dist/css/bootstrap-theme.css"/></head><body><div class="container"><!--顶部导航--><div class="row"><div class="nav col-lg-12 navbar-brand"><ul class="nav nav-t...
Bootstrap3.0学习笔记之栅格系统案例【图】
前言在前面的一篇文章当中，我们主要学习了栅格系统的基本原理，以及通过简单案例进行对原理的实践。那么本文的主要内容将主要分为以下几个部分1.栅格选项2.从堆叠到水平排列3.移动设备和桌面4.Responsive column resets5.列偏移6.嵌套列7.列排序8.总结栅格选项 通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。从上面的截图可以看出来，Bootstrap针对不同尺寸的屏幕（包括手...
bootstrap中弹出窗体dialog的自定义【代码】【图】
感谢nakupanda的https://github.com/nakupanda/bootstrap3-dialog根据需要弹出窗体，但是可以移动，不遮挡下面的内容，所以就修改了源代码，添加了一个属性：dataBackdrop，如果为false，则不生成遮罩。同时添加了缩小按钮var dialogId = ‘eventModal‘;var dialog = new BootstrapDialog({id: dialogId,title: obj.EVENTNAME,message: detailHtml,draggable: true,dataBackdrop: false,closeByBackdrop: false,closeByKeyboard: ...
AngularJS Bootstrap【代码】
AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。Bootstrap你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：<link rel="stylesheet" href="//apps.bdimg.com/libs/boots...
Bootstrap Metronic 学习记录（二）菜单栏【代码】【图】
1.简介1) .环境配置2) .提取页面2）.动态生成菜单（无限级别树）2.系统环境配置项目需要程序数据支撑，这里选择MVC5.0+EF6.0[SQLSERVER]（不对MVC架构和SQLServer做出解读）运行环境：VS2013+MVC5.0+EF6.1+SQLServer2012解决方案名称：AppSolution 项目名称：App.Web(UI层)与App.Models(数据访问层) -直接访问模式提取theme下的所有文件到MVC的Content，提取admin的index.html到_Layout.cshtml来准备改造 3.创建数据库和表数据库...
bootstrap validator 使用 带代码
如何使用bootstrapVlidator插件？下载bootstrapVlidator插件在需要使用的页面引入bootstrapVlidator的js文件和css文件如： 注：在此基础之前必须引入jquery库和bootstrap的js文件和css样式。如：放入所需插件 引入路径 3.表单代码：<form id="registForm"> <!--下面是用户名输入框--> <div class="form-group"> <div class="input-group"> <span class="input-group-addon...
bootstrap历练实例： 胶囊式的导航菜单
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>bootstrap历练实例： 基本胶囊式的导航菜单</title> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0" /> <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" /></head><body> <div class="container"> <ul class="nav nav-pills"> ...
bootstrap栅格系统响应式【代码】【图】
小于768的手机端：col-xs大于768小于992的平板：col-sm大于992小于1200：col-md大于1200：col-lg<!DOCTYPE html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"><title>我是中国人</title><!-- 新 Bootstrap 核心 CSS 文件 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="js/bootstrap.min.js">...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单帮助文本【代码】【图】
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootstrap 实例 - 表单帮助文本</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><form role="form"><s...
bootstrap之 formgroup表单布局样式【代码】【图】
<form class="form-horizontal" role="form"><fieldset><legend>配置数据源</legend><div class="form-group"><label class="col-sm-2 control-label" for="ds_host">主机名</label><div class="col-sm-4"><input class="form-control" id="ds_host" type="text" placeholder="192.168.1.161"/></div><label class="col-sm-2 control-label" for="ds_name">数据库名</label><div class="col-sm-4"><input class="form-control" id=...
bootstrap-table的使用【代码】【图】
使用bootstrap-table插件实现table和分页一起使用，效果如下图所示 具体使用，参考：https://www.cnblogs.com/wuhuacong/p/7284420.html 很详细。这里就不说了。 如何实现某一列样式的改变，比如说根据某一列的结果，显示不同的样式。可以使用formatter来设置。具体设置如下：$(‘#table‘).bootstrapTable({url: ‘/user/getBookingRecordByName?username=@ViewBag.username&seq=‘ + Math.random(),method: ‘GET‘,striped: tr...
Bootstrap组件---下拉菜单【代码】【图】
功能简介： 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。注意：可以仅仅通过data属性API就可以使用Bootstrap的所有组件，无需写一行javascript代码。这是Bootstrap中的一等API，也应该是个人的首选方式。实例：<!-- 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里 --><!-- 当设置dropup时，菜单向上弹出（默认向下弹出） --><div class="dropdown"><!-- 可以仅仅通过data属性AP...