BOOTSTRAP - 技术教程文章
bootstrap-datatables【图】
刚写到datatimepicker的时候想到这个问题。这可以说是我接触到的第一个功能如此齐全的一款依赖型插件。我把依赖于别人库的插件这么称呼。首先上官网：http://datatables.club/官网还是比较丑的，颜色搭配和风格简直了。我想他们一定没有一个好的美工。但是没关系，他们插件做出来的东西完全符合bootstrap的风格——简洁、大方。表格插件的使用很复杂。如果只是简单使用，并且不做任何样式和内容的修改，我想会让你轻松许多，因为只...
bootstrap37-Bootstrap 下拉菜单对齐方式
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootstrap 下拉菜单对齐方式</title><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> </head><body><div class="container"><div class="dropdown"><button class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题<span class="caret"></span></button><ul class="dropdown-menu pull-...
2016年5月29日下午（传智Bootstrap（笔记二））【代码】【图】
一、Bootstrap 排版 1、行内文本样式 <b>、<strong>、<i>、<em>、<del>、 Bootstrap 提供了一些用于强调文本的类，如下面实例所示：<small>本行内容是在标签内</small><br><strong>本行内容是在标签内</strong><br><em>本行内容是在标签内,字体为斜体</em><br><b>本行内容是在标签内</b><br><i>本行内容是在标签内,字体为斜体</i><br><del>本行内容是在标签内，有删除线</del><br><s>本行内容是在标签内，有删除线<...
bootstrap tab页签插件【代码】
基于bootstrap.js <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><!-- Bootstrap core CSS --><link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jque...
bootstrap-paginator分页插件的简单使用实例【代码】
21:36:40简述：bootstrap-paginator是一款基于bootstrap的jQuery分页插件。githup项目地址：https://github.com/lyonlai/bootstrap-paginator兼容： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+参数介绍：标记为红色的为必选参数参数名称数据类型默认值描述bootstrapMajorVersionnumber2搭配使用的bootstrap版本，如果bootstrap的版本是2.X的分页必须使用div元素。3.X分页的必须使用ul>li元素。注意与bootstrap版本...
在线Bootstrap（前端框架)编辑器
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。下面给大家推荐一个在线Bootstrap 可视化布局系统编辑器。链接：点我点击链接进入编辑器，上方为工具栏，选择编辑操作，左侧为工具栏，可以根据需要添加组件，右边为编辑页面。完成编辑后，可以点击工具栏中的预览查看无误后，点击下载，复制代码。该代码正确运行需要jquery文件、bootstrap的...
Bootstrap 教程
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。Bootstrap，来自 Twitter，是目前很受欢迎的前端框架...
Bootstrap分页功能【代码】【图】
基于Bootsrap增加跳转页高亮功能<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><scr...
bootstrap注意事项（七）图片【图】
在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class： .img-rounded：添加 border-radius:6px 来获得图片圆角。.img-circle：添加 border-radius:500px 来让整个图片变成圆形。.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。<!DOCTYPE HTML><html><head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> </head><body> <img src="/course/554b2aa0...
bootstrap selectpicker 通过代码指定选中值 BootStrap selectpicker后台动态绑定数据 selectpicker 获取选中option的属性或者值【代码】
bootstrap-select使用bootstrap selectpicker 通过代码指定选中值$(‘#subjectno‘).selectpicker(‘val‘,(row.subjectno));row.subjectno替换成你要指定的值，当然前提必须要在select已有的数据中selectpicker 获取选中option的属性或者值BootStrap selectpicker后台动态绑定数据原文：http://www.cnblogs.com/fuqiang88/p/7488723.html
JS组件Bootstrap实现弹出框和提示框效果代码
JS组件Bootstrap实现弹出框和提示框效果代码作者：懒得安分 字体：[增加减小] 类型：转载 时间：2015-12-08 我要评论这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码，对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两种处理方式：行内编辑和弹出框编 辑。在增加用户体验方面，弹出框和提示框起着重要的作...
bootstrap30-辅助类展示不同的背景颜色
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootstrap 辅助类</title><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <style>div{width: 600px;height: 300px;}</style></head><body><div class="container"><div class="bg-primary">.bg-primary</div><div class="bg-success">.bg-success</div><div class="bg-info">.bg-info</div><div class="bg-w...
bootstrap -- 一个标签中，同时有 col-xs , col-sm , col-md , col-lg【代码】
.col-xs- 超小屏幕 手机 (<768px).col-sm- 小屏幕 平板 (≥768px).col-md- 中等屏幕 桌面显示器 (≥992px).col-lg- 大屏幕 大桌面显示器 (≥1200px) HTML代码：<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"></div>当屏幕尺寸小于 768px 的时候，用 col-xs-12 类对应的样式；在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；大于 1200px 的时候，用 col...
Bootstrap系列 -- 36. 向上弹起的下拉菜单【代码】
有些菜单是需要向上弹出的，比如说你的菜单在页面最底部，而这个菜单正好有一个下拉菜单，为了让用户有更好的体验，不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示，只需要在“btn-group”上添加这个类名（当然，如果是普通向上弹出下拉菜单，你只需要在“dropdown”类名基础上追加“dropup”类名即可）。<div class="btn-group dropup"><button class="btn btn-defau...
在慕课学习Bootstrap【代码】【图】
---恢复内容开始---可以用class=“h1”等给元素加h1样式<h>------<small>----</small></h> <small>是副标题class="lead" 强调文本，突出显示<strong>---</strong> 粗体<i>---</i> <em>---</em> 斜体 text-muted：提示，使用浅灰色（#999） text-left 文本向左对齐 ...
html5—Bootstrap【代码】
（注：本笔记是本人在菜鸟教程网站https://www.runoob.com/bootstrap学习时所做的记录）一、Bootstrap介绍Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。二、Bootstrap包的内容基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。CSS：Bootstrap 自带以下特性：全局的 CSS 设...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-align-left【代码】【图】
<!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>Align-left Glyph</h2><p>Align-left icon: <span class="glyphicon glyphicon-align-left"></span></p><p>Align-left icon as a link:<a href="#"><s...
Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素【代码】【图】
Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素1. Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕尺寸的增加，系统会自动分为最多12列。举例：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test bootstrap</title><link rel="stylesheet" href="./css/bootstrap.min.css"><script type="text/javascript" src="./js/bootstr...
自己写的基于bootstrap风格的弹框插件【代码】
自己写的一款基于bootstrap风格的弹框插件，暂时只有确认框、提示框。后续功能扩展、bug修改再更新。;(function($){//默认参数var PARAMS;var DEFAULTPARAMS = {width: 500,title: ‘提示消息‘,content: ‘‘,okbtn: ‘确定‘,cancelbtn: ‘取消‘,headerBackground: ‘info‘,vbackdrop: ‘static‘, //默认点击遮罩不会关闭modalvkeyboard: true, //按esc关闭modalconfirmFn: new Object,cancelFn: new Objec...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-print【代码】【图】
<!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>Print Glyph</h2><p>Print icon: <span class="glyphicon glyphicon-print"></span></p><p>Print icon as a link:<a href="#"><span class="glyphicon...
AngularJs+bootstrap搭载前台框架——准备工作【图】
1.关于什么是AngularJs以及什么是bootstrap我就不多说了，简单说下，AngularJs是一个比较强大前台MVC框架，bootstrap是Twitter推出的一个用于前端开发的开源工具包，可以迅速搭建web前台，可以去官网看看（AngularJs：http://angularjs.org/ ，bootstrap：http://twitter.github.io/bootstrap/）。2.github上有一个比较好的纯净AngularJs app的种子，可以去github下载，地址：https://github.com/glitchtank/angular-seed-master。...
SSM框架 SSM项目源码 SSM源码 下载 java框架整合Springmvc+mybatis+shiro+bootstrap【图】
获取【下载地址】? ?QQ: 313596790? ?【免费支持更新】支持三大数据库 mysql??oracle??sqlsever? ?更专业、更强悍、适合不同用户群体【新录针对本系统的视频教程，手把手教开发一个模块，快速掌握本系统】A 代码生成器(开发利器);? ?? ?增删改查的处理类，service层，mybatis的xml，SQL( mysql? ?和oracle)脚本,? ?jsp页面 都生成? ?就不用写搬砖的代码了,生成的放到项目里，可以直接运行B 阿里巴巴数据库连接池druid;??数据库连接...
PHP 结合 Bootstrap 实现学生列表以及添加学生功能实现（继上篇登录及注册功能之后）【代码】
本人是一位学生，正在学习当中，可能BUG众多，请见谅并指正，谢谢！！！ 学生列表实现HTML:<!DOCTYPE html><html><head><meta charset="utf-8"><title>学生信息</title><link rel="stylesheet" type="text/css" href="css/Bootstrap.css"></head><body><div class="container mt-5"><h1 class="display-4 text-center">学生信息管理中心</h1><div class="row mt-3"><a class="btn btn-info col-sm-2" style="margin-right: 88px; ...
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框架(基础篇)之按钮,网格,导航栏,下拉菜单【代码】【图】
一,按钮注意：虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。框架中提供了基础按钮的例子:<button class="btn" type="button">基础按钮.btn</button><button class="btn btn-default" type="button">默认按钮.btn-default</button><button class="btn btn-primary" type="button">主要按钮.btn-primary</button><button...
Bootstrap段落（正文文本）【代码】
一、Bootstrap段落特点 段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）： 1、全局文本字号为14px(font-size)。 2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。 3、颜色为深灰色（#333）； 4、字体为"Helvetica Neue", Helvetica, A...
bootstrap-multiselect 多选【代码】
官方教程http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html 使用方法：第一步引用样式以及相关JS<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script><!-- Include the plugin‘s CSS and JS: --> <script type="text/javascript" src="...
bootstrap 中的按钮样式（button/a）【代码】【图】
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap --><link href="__STATIC__/插件/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file...
bootstrap3-iframe-modal子页面在父页面显示模态框【代码】
本文灵感来自：http://www.cnblogs.com/chengxuyuanzhilu/p/5132328.html子页面内容//打开模态框function openMySelectModiaOrPackageModal(){var fatherBody = $(window.top.document.body);//定义页面存放模态窗口的元素var id = ‘iframeModalPages‘;var dialog = $(‘#‘ + id);if (dialog.length == 0) {dialog = $(‘<div class="modal fade" role="dialog" id="‘ + id + ‘">‘+$(‘#mySelectMediaOrPackageModal‘).html...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)【代码】【图】
这个标题取的有点奇怪，怪我翻译的有问题吧。英文学平有限，有道词典和google翻译齐上阵是必须的。还好翻译的不是小说，对于技术文章，还是能勉强翻过来的。本文主要讲解了Bootstrap3.0的栅格布局系统实现原理，以及使用过程中应该注意的问题。开始...翻译..像<SPAN style=‘font-family: "Times New Roman";‘>CSS栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，除非你有了比较烂的设...