BOOTSTRAP - 技术教程文章
Bootstrap表单样式【代码】【图】
<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 按钮和折叠插件【代码】【图】
---恢复内容开始---一．按钮可以通过按钮插件创建不同状态的按钮。//单个切换。<button class="btn btn-primary" data-toggle="button" autocomplete="off">单个切换</button>鼠标点击按钮，选中状态，鼠标再点击，未选中状态，背景颜色变化注：在 Firefox 多次页面加载时，按钮可能保持表单的禁用或选择状态。解决方案是： 添加 autocomplete="off"。//单选按钮<div class="btn-group" data-toggle="buttons"><label for="" class...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-text-width【代码】【图】
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></head><body><div class="container"><h2>Text-width Glyph</h2><p>Text-width icon: <span class="glyphicon glyphicon-text-width"></span></p><p>Text-width icon as a link:<a href="#"><s...
前后端连接（BootStrap_MySQL_MyEclipse）【图】
今天学了前后台的连接。之前脑子一团浆糊，就连后端对数据库的操作都不熟。就一点点来写吧，会多少写多少，错了以后再改吧，可能进步比较慢，但肯定会慢慢好起来的。 以前一直对数据库连接就不太懂。先从数据库连接写起。疑问点1：之前就是不明白为什么要有一个con,而且还是Connection类型的， 理解：你想对数据库操作，肯定的先连上数据库吧，那就得用一个变量来告诉别人，连接情况是啥，到底连没连 上，刚开始肯定是null的呀...
JS组件系列——Bootstrap右键菜单解决方案：ContextMenu【代码】【图】
前言：有段时间没发表随笔了，过个年人都变得懒了。新年刚来上班，今天正好得空，将去年遗留的两个小组件总结记录下。有朋友跟我说：你的bootstrap组件要能够形成一个可以满足一般项目需求的系列组件，才有真正的实用价值。想想说得在理。这不今天来总结下bootstrap的一个小组件的应用。好了，不说废话，进入正题吧。一、ContextMenu介绍年前，博主接到一个需求：表格行调序，支持多选调序，并且可以不连续多选。什么意思呢？先来看...
HTML5+Bootstrap 学习笔记 3【代码】
HTML5 aria-* and rolearia是指Accessible Rich Internet Application。role的作用是描述一个非标准的tag的实际作用，而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。比如1<div role="checkbox" aria-checked="checked"></div> 什么是ARIA：WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者...
BootStrap2学习日记11---单选框多选框【代码】【图】
单选框代码:<label for="country">国家</label><select id="country"><option value="1">China</option><option value="2">United States</option><option value="3">Japan</option><option value="4">England</option></select>效果:单击多选框的实现 直接在Select标签加上multiple="multiple" 即可 代码如下:<select id="country" multiple="multiple">效果:原文：http://www.cnblogs.com/keiling/p/3638282.html
web框架之Bootstrap基本使用(python3入门)【代码】
一、Bootstrap初识快速帮助我们完成样式与布局 简单理解bs，给标签添加类名，就可以获取bs提前写好的样式 固定结构下的固定类名，不仅可以获得样式，还可以获得事件 二、Bootstrap使用 精髓：复制，粘贴，修改 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>bootstrap初识</title><!--导入bootstrap样式--><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"><!--设置字体图标大小颜色--><...
bootstrap_10图片【代码】
<!doctype html> <html> <meta charset="utf-8" /> <head> <title>益司CMS-PC与手机建站集成</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!--<link href="__PUBLIC__/bootstrap/css/bootstrap-theme.css" rel="stylesheet" />--> <!--[if It I...
angular+bootstrap分页指令案例【代码】【图】
AngularJS中不仅内置了许多指令，而且开发人员也可以通过自定义指令来完成特殊操作，指令创建成功后可以到处复用。Web应用中的分页处理最为常见，我们可以将分页模块编写成一个可以复用的Angular指令，在使用时无需考虑指令的内部实现细节，像使用普通HTML元素一样简单。1：index.html<!DOCTYPE html><html ng-app="myApp"><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=d...
bootstrap学习笔记<十>（导航）【代码】【图】
1）最基本的按钮导航<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>基本按钮导航</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><link rel="stylesheet" href="style.css"></head><body><div class="btn-group"><button class="btn btn-danger" type="button">首页</button><button class="btn btn-default" ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮被点击【代码】【图】
<!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>按...
bootstrap-添加额外的图标【代码】【图】
说明可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可示例<!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>Boot...
基于BootStrap的initupload()实现Excel上传和获取excel中的数据【代码】
简单说明：后边要做exl解析(还没做呢)，所以先有一个excel的的上传以及获取excel中的数据，展示出来。代码：//html代码 <div class="btn-group"> <button class="btn sbold green" id="" onclick="initUpload(‘excelFile‘,‘/vraxx/rightAxx/upload‘);"> <span class="ladda-label">导入权益</span> </button> </div><div class="modal-body"> <div class="row"> <div class="form-group"> <...
代码生成器 SpringMVC_mybatis or hibernate+ehcache二级缓存 +shiro+druid+bootstrap+HTML5_标签
原文：http://hg686.iteye.com/blog/2199632
使用Bootstrap 3开发响应式网站实践02,轮播【代码】【图】
本篇体验图片轮播。html部分为： <div class="carousel slide" id="myCarousel" ><!--Indicators--><ol class="carousel-indicators"><li class="active" data-slide-to="0" data-target="#myCarousel"></li><li data-slide-to="1" data-target="#myCarousel"></li><li data-slide-to="2" data-target="#myCarousel"></li></ol><!--wrapper for slides--><div class="carousel-inner"><div class="item active" id="slide1...
bootstrap-面板中嵌套列表组【代码】【图】
1.运行效果如图所示650) this.width=650;" src="/upload/getfiles/default/2022/11/6/20221106031644799.jpg" title="QQ截图20170526175406.png" />2.实现代码如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>面板--面板中嵌套列表组</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https...
【Tomcat】eclipse运行Bootstrap启动tomcat，免插件配置【图】
配置的步骤如下：步骤1：650) this.width=650;" title="步骤1" src="/upload/getfiles/default/2022/11/11/20221111102850503.jpg" />步骤2：650) this.width=650;" title="步骤2" src="/upload/getfiles/default/2022/11/11/20221111102850967.jpg" />本文出自 “宁静致远” 博客，请务必保留此出处http://lizhuquan0769.blog.51cto.com/2591147/1695393原文：http://lizhuquan0769.blog.51cto.com/2591147/1695393
Python+Flask + Echarts + Bootstrap打造漂亮的疫情监控系统【图】
一、引言 手撸了一个完整的实时疫情监控系统，基于Python + Flask + Pyecharts + Bootstrap，实现了前后端分离。核心功能包括：实时疫情概览、实时疫情监控、新增确诊/疑似病例变化趋势、累计确诊病例变化趋势、累计死亡/治愈病例趋势和疫情数据分地区分布。具体的功能如下图所示：二、正文2.1 实时疫情监控实时疫情监控包括全国实时疫情数据概览和全国实时疫情数据分布两个功能能。2.2 新增确诊趋势全国新增确诊/疑似变化趋势，提...
bootstrap 多级下拉菜单【代码】【图】
如上效果；实现代码：导入js和css：1 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 2 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 3 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>html code： 1 <div class="container">2 <div class="row">3 ...
bootstrap table 实现固定悬浮table 表头并可以水平滚动【代码】
在开发项目中，需要将表格头部固定，而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap 3，故也可以叫做bootstrap table。需要实现的是：表格头部固定，并且支持水平滚动html code(source table):<table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="table table-hover"><thead><tr id="table_head"><td>Test</td>....</tr></thead><tbody></tbody></table>stylesheet code:#fixed_table #...
Bootstrap使用手册【图】
学习Bootstrap，无奈我们大多数情况下都是断网开发，想要将Bootstrap的使用案例等离线查看。于是花了2个小时整理，保存，总算弄出来本PDF。内置书签，方便自己查阅，现在分享出来。供大家方便。 忘记连接下载地址了：http://download.csdn.net/detail/fanchao1987/8093277原文：http://www.cnblogs.com/cherver/p/4058240.html
Appium Server源码分析之作为Bootstrap客户端【图】
Appium Server源码分析之作为Bootstrap客户端Appium Server拥有两个主要的功能： 它是个http服务器，它专门接收从客户端通过基于http的REST协议发送过来的命令 他是bootstrap客户端：它接收到客户端的命令后，需要想办法把这些命令发送给目标安卓机器的bootstrap来驱动uiatuomator来做事情 通过上一篇文章《Appium Server 源码分析之启动运行Express http服务器》我们分析了Appium Server是如何作为一个http服务器进行工作...
Bootstrap框架【代码】
Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？在Bootstrap出现之前：命名：重复、复杂、无意义（想个名字费劲）样式：重复、冗余、不规范、不和谐页面：错乱、不规范、不和谐在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。Bootst...
MVC+EF bootstrap-table使用DataTable【代码】【图】
MVC+EF返回数据集时都会对应一个实体，这种情况当然是确定的实体，但是当返回的实体是不确定的又该如何？思前想后，觉得datatable应该可以满足需求，但是当兴致勃勃的组合完sql按照以前的方式（ return Json(new { total = pageCount, rows = list }, JsonRequestBehavior.AllowGet);）返回json时前台接收报错 ”序列化类型为“System.Reflection.RuntimeModule”的对象时检测到循环引用“ 【具体原因还不是很清楚】 但是感觉就是序...
BootStrap学习笔记【代码】
一、BootStrap是什么BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端界面，它是后端程序员的福音，使他们只需要专注业务逻辑，而无须浪费太多的精力在界面设计上。全响应它可以开发全响应式网页——不论你使用手机、平板电脑、普通个人电脑浏览网站内容，所有的元素都可以很优雅的呈现，减轻了因为兼容性而带来的工作量。二、下载如果你想把BootStrap文件放在项目中供本地使...
bootstrap 模态框【代码】
<%-- 自定义选择工作表 弹出框--%><div class="modal fade" id="createFileMModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" style="height: 200px;" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="createFileTitle">输入工作表名称</h5><button type="button" class="close" data-dismiss="modal" aria-label="Cl...
less 经典范例 bootstrap 的 less 版本 常用 less 代码【代码】
1. bootstrap 的 less 版本2.less 文件分布/*!* Bootstrap v3.3.7 (http://getbootstrap.com)* Copyright 2011-2016 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/// Core variables and mixins // 引入变量和mixin函数 @import "variables.less"; //Bootstrap变量 @import "mixins.less"; //引入Bootstrap mixin工具函数// Reset and dependencies // 重置元...
bootstrap总结
bootstrap在reset.css文件中设置margin为0，因此其他的标签需要重新设计margin。1.h<h>标签和普通使用方法一样。定义了.h1~.h6六个类名，样式和标题样式一样。副标题用<small>标签指出，必须包含在h标签内。<h1>标题1</h1><div class="h1">标题1</div>2.p定义<body>的字体库、字号、行高、颜色，<p>标签继承这些设置，单独设置margin-bottom为10px，使用方法同普通方法。强调内容增大：.lead;加粗：<strong>; <b>（设置font-weight...
吴裕雄 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><p><button type="button"...