bootstrap 订阅
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [1]  国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。 [2] 展开全文
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [1]  国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。 [2]
信息
开发商
Twitter
软件授权
美国Twitter公司
软件名称
Bootstrap
更新时间
2019-02-13
软件版本
v4.4.1(稳定版)
软件平台
IE/Chrome/Opera/Firefox/Safari等
软件语言
HTML、CSS、JavaScript
软件大小
713K
Bootstrap版本形态
目前使用较广的是版本2、3和4,其中2的最新版本的是2.3.2,3的最新版本是3.4.1,4的最新版本是4.4.1 [3]  在2018年1月下旬,Bootstrap团队发布了Bootstrap 4 正式版,4的最主要变化包括以下方面:
收起全文
精华内容
参与话题
问答
  • Bootstrap

    千次阅读 2013-11-11 23:04:37
  • bootstrap创建登录注册页面

    万次阅读 多人点赞 2015-12-15 18:13:16
    技术:bootstrap,font-awesome,jquery-validate; 特点:响应式布局,表单验证(用户两次密码是否相同,必填信息是否填写)背景图片自适应屏幕大小; 宗旨:从实战中学知识。 个人主页:http://www.itit123.cn/ ...
    扫码关注领编程教学资料

     

    用bootstrap做登入注册页面,使用validate做表单验证

    技术:bootstrap,font-awesome,jquery-validate;

    特点:响应式布局,表单验证(用户两次密码是否相同,必填信息是否填写)背景图片自适应屏幕大小;

    宗旨:从实战中学知识。

     

    个人主页:http://www.itit123.cn/ 更多干货等你来拿 (微信小程序入门教程:入门教程系列 ,提供免费的api接口,无需考虑服务端代码问题)。

    验证码实现功能 ITDragon博客

     

    效果图:

     

    html代码:

    第三方资源的导入是用cdn引入;当然也可以自己去下载在本地导入。

     

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>bootstrap案例</title>
    		<!--用百度的静态资源库的cdn安装bootstrap环境-->
    		<!-- Bootstrap 核心 CSS 文件 -->
    		<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    		<!--font-awesome 核心我CSS 文件-->
    		<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    		<!-- 在bootstrap.min.js 之前引入 -->
    		<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    		<!-- Bootstrap 核心 JavaScript 文件 -->
    		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    		<!--jquery.validate-->
    		<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
    		<script type="text/javascript" src="js/message.js" ></script>
    		<style type="text/css">
    			body{background: url(img/4.jpg) no-repeat;background-size:cover;font-size: 16px;}
    			.form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}
    			#login_form{display: block;}
    			#register_form{display: none;}
    			.fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
    			input[type="text"],input[type="password"]{padding-left:26px;}
    			.checkbox{padding-left:21px;}
    		</style>
    	</head>
    	<body>
    		<!--
    			基础知识:
    			网格系统:通过行和列布局
    			行必须放在container内
    			手机用col-xs-*
    			平板用col-sm-*
    			笔记本或普通台式电脑用col-md-*
    			大型设备台式电脑用col-lg-*
    			为了兼容多个设备,可以用多个col-*-*来控制;
    		-->
    	<div class="container">
    		<div class="form row">
    			<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form">
    				<h3 class="form-title">Login to your account</h3>
    				<div class="col-sm-9 col-md-9">
    					<div class="form-group">
    						<i class="fa fa-user fa-lg"></i>
    						<input class="form-control required" type="text" placeholder="Username" name="username" autofocus="autofocus" maxlength="20"/>
    					</div>
    					<div class="form-group">
    							<i class="fa fa-lock fa-lg"></i>
    							<input class="form-control required" type="password" placeholder="Password" name="password" maxlength="8"/>
    					</div>
    					<div class="form-group">
    						<label class="checkbox">
    							<input type="checkbox" name="remember" value="1"/> Remember me
    						</label>
    						<hr />
    						<a href="javascript:;" id="register_btn" class="">Create an account</a>
    					</div>
    					<div class="form-group">
    						<input type="submit" class="btn btn-success pull-right" value="Login "/>   
    					</div>
    				</div>
    			</form>
    		</div>
    
    		<div class="form row">
    			<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form">
    				<h3 class="form-title">Login to your account</h3>
    				<div class="col-sm-9 col-md-9">
    					<div class="form-group">
    						<i class="fa fa-user fa-lg"></i>
    						<input class="form-control required" type="text" placeholder="Username" name="username" autofocus="autofocus"/>
    					</div>
    					<div class="form-group">
    							<i class="fa fa-lock fa-lg"></i>
    							<input class="form-control required" type="password" placeholder="Password" id="register_password" name="password"/>
    					</div>
    					<div class="form-group">
    							<i class="fa fa-check fa-lg"></i>
    							<input class="form-control required" type="password" placeholder="Re-type Your Password" name="rpassword"/>
    					</div>
    					<div class="form-group">
    							<i class="fa fa-envelope fa-lg"></i>
    							<input class="form-control eamil" type="text" placeholder="Email" name="email"/>
    					</div>
    					<div class="form-group">
    						<input type="submit" class="btn btn-success pull-right" value="Sign Up "/>
    						<input type="submit" class="btn btn-info pull-left" id="back_btn" value="Back"/>
    					</div>
    				</div>
    			</form>
    		</div>
    		</div>
    	<script type="text/javascript" src="js/main.js" ></script>
    	</body>
    </html>
    

     

     

     

    js代码:

    可能有不合理的方法,毕竟笔者能力有限,如有更好的方法可以留言,我会及时修改。

     

    $().ready(function() {
    	$("#login_form").validate({
    		rules: {
    			username: "required",
    			password: {
    				required: true,
    				minlength: 5
    			},
    		},
    		messages: {
    			username: "请输入姓名",
    			password: {
    				required: "请输入密码",
    				minlength: jQuery.format("密码不能小于{0}个字 符")
    			},
    		}
    	});
    	$("#register_form").validate({
    		rules: {
    			username: "required",
    			password: {
    				required: true,
    				minlength: 5
    			},
    			rpassword: {
    				equalTo: "#register_password"
    			},
    			email: {
    				required: true,
    				email: true
    			}
    		},
    		messages: {
    			username: "请输入姓名",
    			password: {
    				required: "请输入密码",
    				minlength: jQuery.format("密码不能小于{0}个字 符")
    			},
    			rpassword: {
    				equalTo: "两次密码不一样"
    			},
    			email: {
    				required: "请输入邮箱",
    				email: "请输入有效邮箱"
    			}
    		}
    	});
    });
    $(function() {
    	$("#register_btn").click(function() {
    		$("#register_form").css("display", "block");
    		$("#login_form").css("display", "none");
    	});
    	$("#back_btn").click(function() {
    		$("#register_form").css("display", "none");
    		$("#login_form").css("display", "block");
    	});
    });

     

    资源下载地址:http://download.csdn.net/detail/qq_19558705/9358603

     

     

     

    现在我们开始谈谈所用到的知识点:

    ①bootstrap的布局:

    bootstrap用的是网格布局,使用col-*-*

    使用条件:要在.container和.row下才能使用,结构如下:

     

    <div class="container">
       <div class="row">
          <div class="col-*-*"></div>
          <div class="col-*-*"></div>      
       </div>
       <div class="row">...</div>
    </div>

    参考值:
    col-xs-*:小于768px,手机

     

    col-sm-*:大于768px,平板

    col-md-*:大于998px,普通电脑,笔记本之类

    col-lg-*:大于1200px,一般为大型台式电脑

    可以同时使用,达到跨多个设备效果

    偏移:col-*-offset-*

     

    ②表单:

    这里的表单和普通表单没什么太多区别,我就不多说了。

     

    ③font-awesome的使用:

    使用的是4.3.0版本,使用方法

     

    <i class="fa fa-check fa-lg"></i>

    fa-lg表示大图

     

    更多icon参考:http://fontawesome.dashgame.com/
     

    ④jquery-validate表单验证:

    这是我要讲的重点,

    第一步:首先到导入jquery-validate第三方资源,

    第二步:创建好form表单,初始化validate

     

    $("#login_form").validate({
    		rules: {
    			username: "required",
    			password: {
    				required: true,
    				minlength: 5
    			},
    		},
    		messages: {
    			username: "请输入姓名",
    			password: {
    				required: "请输入密码",
    				minlength: jQuery.format("密码不能小于{0}个字 符")
    			},
    		}
    	});

    注意这里的login_form必须是form表单上的选择器,笔者因为将其设置在div上,控制台显示settings没有被定义的错误。这里的username和password都是form表单中的name值;rules是规则,message是提示的信息

     

    required:true表示该字段为必填,

    minlength表示长度至少为5,maxlength是html5支持的,所以不用在这里面设置

    equalTo表示与某某相同,后面接的是第一个值,"#id"或者是".class"

    message中对应的内容后面就是提示的文字信息。可以直接copy我的代码,然后根据自己的需要修改。

     

    ⑤背景自适应屏幕大小:

    不知道前到处找文档,知道后才发现好简单,那就是background-size:cover;这样可以做到背景图片和浏览器大小一样了。很简单吧。

     

    bootstrap创建登录注册页面github下载地址:

    https://github.com/ITDragonBlog/daydayup/blob/master/bootstrap

     

    我觉得在实战中学习比盲目学习效果好很多,知道这些知识可以做什么,解决了为什么学这些知识的问题。

    我总结,你来学,一起装逼一起飞。有什么疑问和建议可以留言,我会及时修改。转载请注明来源。

     

     

    展开全文
  • Bootstrap方法详解——技术与实例

    万次阅读 多人点赞 2016-11-17 14:33:32
    一、Introduction 如果说到Bootstrap你会想到什么?是Twitter推出的那个用于前端开发的开源工具包吗?Unfortunately,本文要讨论的并非是...机器学习中的Bagging,AdaBoost等方法其实都蕴含了Bootstrap的思想...

    一、Introduction

     

    如果说到Bootstrap你会想到什么?是Twitter推出的那个用于前端开发的开源工具包吗?Unfortunately,本文要讨论的并非是Bootstrap工具包,而是统计学习中一种重采样(Resampling)技术。这种看似简单的方法,对后来的很多技术都产生了深远的影响。机器学习中的Bagging,AdaBoost等方法其实都蕴含了Bootstrap的思想。

     

    下面引用的是谢益辉博士关于Bootstrap (和 Jackknife)基本思想的论述,希望能帮助读者对于Bootstrap 建立一个初步的认识:

     

    在统计的世界,我们面临的总是只有样本,Where there is sample, there is uncertainty,正因为不确定性的存在,才使统计能够生生不息。传说统计学家、数学家和物理学家乘坐一列火车上旅行,路上看到草原上有一只黑羊,统计学家说,“基于这个样本来看,这片草原上所有的羊都是黑的”,数学家说,“只有眼前这只羊是黑的”,物理学家则说,“你们都不对,只有羊的这一面是黑的”。这是关于统计和其他学科的一个玩笑话,说明了统计的一些特征,比如基于样本推断总体。

     

    一般情况下,总体永远都无法知道,我们能利用的只有样本,现在的问题是,样本该怎样利用呢?Bootstrap的奥义也就是:既然样本是抽出来的,那我何不从样本中再抽样(Resample)?Jackknife的奥义在于:既然样本是抽出来的,那我在作估计、推断的时候“扔掉”几个样本点看看效果如何?既然人们要质疑估计的稳定性,那么我们就用样本的样本去证明吧。

     

    John Fox的那一系列附录中有一篇叫“Bootstrapping Regression Models”,当我看到第二页用方框框标出那句话时,我才对Bootstrap的思想真正有了了解(之前迷茫了很长时间)。Bootstrap的一般的抽样方式都是“有放回地全抽”(其实样本量也要视情况而定,不一定非要与原样本量相等),意思就是抽取的Bootstrap样本量与原样本相同,只是在抽样方式上采取有放回地抽,这样的抽样可以进行B次,每次都可以求一个相应的统计量/估计量,最后看看这个统计量的稳定性如何(用方差表示)。Jackknife的抽样痕迹不明显,但主旨也是取样本的样本,在作估计推断时,每次先排除一个或者多个样本点,然后用剩下的样本点求一个相应的统计量,最后也可以看统计量的稳定性如何。

     

    在R中简单随机抽样的函数是sample(),其中有个参数replacement表示是否放回,经典的抽样基本都是不放回(replace = FALSE),而Bootstrap则是replace = TRUE;从FALSE到TRUE,小小的一个变化,孕育了Bootstrap的经典思想。

     

    统计推断是从样本推断相应的总体, 有参数法和非参数法。早期的统计推断是以大样本为基础的。自从英国统计学家威廉·戈塞特(Willam Gosset)在1908年发现了t分布后,就开创了小样本的研究。费希尔(Fisher)在1920年提出了似然(likelihood)的概念,一直被认为是高效的统计推断思维方法。半个多世纪以来,这种思维一直占有主导地位,统计学家研究的主流就是如何将这种思维付诸实践,极大似然函数的求解是这一研究的关键问题。

    当今计算机技术的高度发展,使统计研究及其应用跃上了一个新台阶。这不仅提高了计算的速度,而且可以把统计学家从求解数学难题中释放出来,并逐渐形成一种面向应用的、基于大量计算的统计思维——模拟抽样统计推断, Bootstrap 法就是其中的一种。

    Bootstrap方法最初由美国统计学家、斯坦福大学教授Bradley Efron在1977年提出。Bradley Efron曾任国际数理统计学会和美国统计协会主席。他还是Robert Tibshirani的博士导师,Robert Tibshirani发明了著名的LASSO方法。

    作为一种崭新的增广样本统计方法,Bootstrap方法为解决小规模子样试验评估问题提供了很好的思路。当初,Efron教授将他的论文投给了统计学领域的一流刊物《The Annals of Statistics》,但在被该刊接受之前,这篇后来被奉为扛鼎之作的文章曾经被杂志编辑毫不客气地拒绝过,理由是“太简单”。从某种角度来讲,这也是有道理的,Bootstrap的思想的确再简单不过,但后来大量的事实证明,这样一种简单的思想却给很多统计学理论带来了深远的影响,并为一些传统难题提供了有效的解决办法。Bootstrap方法提出之后的10年间,统计学家对它在各个领域的扩展和应用做了大量研究,到了20世纪90年代,这些成果被陆续呈现出来,而且论述更加全面、系统。

    很多人会对Bootstrap这个名字感到困惑。英语Bootstrap的意思是靴带,来自短语:“pull oneself up by one′s bootstrap”,18世纪德国文学家拉斯伯(Rudolf Erich Raspe)的小说《巴龙历险记(或译为终极天将)》(Adventures of Baron Munchausen) 记述道:“巴龙掉到湖里沉到湖底,在他绝望的时候,他用自己靴子上的带子把自己拉了上来。”现意指不借助别人的力量,凭自己的努力,终于获得成功。在这里“bootstrap”法是指用原样本自身的数据抽样得出新的样本及统计量,根据其意现在普遍将其译为“自助法”。

     

    二、Explanation

     

    Bootstrap法是以原始数据为基础的模拟抽样统计推断法,可用于研究一组数据的某统计量的分布特征,特别适用于那些难以用常规方法导出对参数的区间估计、假设检验等问题。其基本思想是:在原始数据的范围内作有放回的再抽样, 样本容量仍为n,原始数据中每个观察单位每次被抽到的概率相等, 为1/n , 所得样本称为Bootstrap样本。于是可得到参数θ的一个估计值θ^(b),这样重复若干次,记为B 。

     

    设随机样本 X = [x1, x2,...,xn]是独立同分布样本xi~F(x), i = 1, 2,..., n。R(X, F)为某个预先选定的随机变量, 是关于X和F的函数。现要求根据观测样本[x1, x2,...,xn]来估计R(X, F)的分布特征。例如,设θ = θ(F)为总体分布F的某个参数,Fn是观测样本X的经验分布函数(如果你不了解什么是“经验分布函数”可以参考http://blog.csdn.net/baimafujinji/article/details/51720090), θ的估计,记估计误差为

       (1)

    现要由观测样本X =[x1, x2,...,xn]估计R(X, F)的分布特征,Bootstrap方法的实质就是一个再抽样过程,计算R(X, F)分布特征的基本步骤归纳如下:
    1)根据观测样本X =[x1, x2,...,xn]构造经验分布函数Fn;
    2)从Fn中抽取样本,称其为Bootstrap样本;
    3)计算相应的Bootstrap统计量R*(X*,Fn),其表达式为

       (2)

    式中是Bootstrap样本的经验分布函数;Rn为Tn的Bootstrap统计量;

     

    4)重复过程2)、3)N次,即可获得Bootstrap统计量R*(X*,Fn)的N个可能取值;
    5)用R*(X*, Fn)的分布去逼近R(X, F)的分布, 即用Rn的分布去近似Tn的分布,可得到参数θ(F)的N个可能取值,即可统计求出参数θ的分布及其特征值。

     

    由Bootstrap方法的实现步骤可以看出:

    1)Rn的统计特性是基于经验分布函数得到的,Tn的统计特性是通过真实分布函数F描述的;

    2)Bootstrap方法的一个重要环节就是计算自助统计量Rn的分布;

    3)Bootstrap方法的核心思想是利用自助统计量Rn的统计特性来近似Tn的统计特性,因此,Bootstrap方法的效果好坏在很大程度上取决于这二者的近似程度;

    4)由式(1)可以看出,Tn的统计特性决定于θ(F)的统计特性。对于某个具体的分布F而言,θ(F)是一个确定的值,因此,Tn的统计特性取决于的统计特性;

    5)由式(2)以及Bootstrap方法的抽样过程可以看出,Rn的统计特性近似于一个N(0,σ^2) 的正态分布。因此,Rn近似Tn的程度主要取决于近似θ(F)的程度。对于大样本而言,Rn与Tn的统计特性有良好的相似性。但对于小子样特别是极小子样的情况下,二者之间的差异却是不可忽略的。

     

    以Bootstrap方法获取正态分布均值的先验分布为例研究Rn的统计特性。已知观测样本数据 X = [x1, x2, ..., xn], xi~N(μ,σ^2),i = 1, 2, ..., n,则X = [x1, x2, ..., xn]的经验分布(这里考虑参数Bootstrap方法)Fn也是一正态分布
    其中,

       (3)

    用经验分布Fn的均值来估计μ, 则有估计误差, 构造的Bootstrap统计量, 其中

     

     

     

     

    三、Application

     

    文献【5】中给出了22例胎儿受精龄(Y,周)与胎儿外形测量指标:身长(X1,cm),头围(X2,cm),体重(X3,g),数据列于表1。

     

    很容易算得三个指标的平均值向量为:X = (33.0455, 23.2636, 936.9091) ---------(2)

    协方差矩阵为

    ---------(3)

    对其进行主成分分析,得3个特征根分别为:λ1 = 2.92613, λ2 = 0.07140, λ3 = 0.00247。我们用bootstrap 法来估计第一特征根的标准差及置信区间。

     

    首先在22个个体中作有放回的抽样,每个个体被抽中的概率为1/22,抽样次数仍为n=22,这可以用计算机产生1~22的均匀分布的随机数,相应的编号即为抽中的个体,由这些个体组成的样本就是一个bootstrap样本。如第一
    次我们得到22个随机数为:10, 20, 3, 19, 12, 2, 3, 2, 5, 20, 8, 13, 12, 18, 17, 22, 2, 1, 19, 7, 8, 13。由对应的bootstrap 样本求得

    如此重复B次(B分别取50, 100, 200, 500, 800, 1000),得

    的频数分布可知,其分布是偏态的。故以上、下2.5%分位数作为其95%置信区间。结果列于附表前半部分。由此得到λ1 的置信区间, 如B = 1000 时, 其95%的置信区间为:2.8919~ 2.9672, 其标准误为0.01946。在整个计算过程中, 只是重复地抽样, 重复地计算λ1, 根据其频数分布的分位数即得到了其置信区间, 无需繁杂的数学推导。事实上,小样本时主成分的置信区间尚无理想的计算方法。

    在这里, 来自未知总体F 的原样本被视为经验分布Fe,Bootstrap是在经验分布的基础上作有放回的抽样, 由于Fe 是F 的非参数估计,故由此产生的方法称为非参数的bootstrap , 相应的估计量称为非参数的bootstrap统计量。

     

    事实上, bootstrap亦可以从参数的角度考虑。如上例, X = (X1 , X2 , X3) ,此时设经验分布Fp 是以式(2)为均向量、式(3)为协方差阵的3元正态分布。此时的Bootstrap的样本是从Fp中而不是从Fe (样本)中随机产生,其余步骤相同。由于此时Fp 是F 的一个参数估计,则该法称为参数的bootstrap,相应的估计称为参数的bootstrap估计。结果列于附表后部分。B = 1000时,其95% 的置信区间为: 2. 8431~ 2. 9705,其标准误为0. 03495。

     

     

    -----------------------------------------------------------------------

    本文主要根据以下文献整理而成

     

    [1] 谢益辉,我的一些统计方法观,http://cos.name/2008/11/outlook-on-statistical-methods/,2007-01-27

    [2] 谢益辉,朱钰,Bootstrap方法的历史发展和前沿研究,统计与信息论坛,2008年2月,第23卷,第2期

    [3] 陈峰,陆守曾,杨珉,Bootstrap估计及其应用,中国卫生统计,1997年,第14卷,第5期

    [4] 刘伟,龙琼,陈芳,付敏,Bootstrap方法的几点思考,飞行器测控学报,2007年10月,第26卷,第5期

    [5] 陈峰,主成分回归分析,中国卫生统计,1991年,第8卷,第1期

    展开全文
  • Bootstrap3 与Bootstrap4垂直水平居中

    万次阅读 多人点赞 2018-07-03 15:58:42
    Bootstrap水平居中 // 文本: class ="text-center" // 图片居中: class = "center-block" //其他元素: //bootstrap3水平居中:利用bootstrap列偏移 class = "col-md-offset-4 col-lg-offset-4col-xl-...

     

     

    Bootstrap水平居中

    // 文本:
    
    class ="text-center"
    // 图片居中:
    
    class = "center-block"

     

    //其他元素:
    
    //bootstrap3水平居中:利用bootstrap列偏移
    
    class = "col-md-offset-4 col-lg-offset-4col-xl-offset-4"
    // bootstrap4水平居中:
    
    class = "m-auto"

     

    Bootstrap垂直居中

    bootstrap3 如何让div内部垂直居中:

    Bootstrap的栅格系统使用的是float:left的浮动方式,vertical-align属性不起作用,故把内部div的float属性清除,添加display属性,如下:

    .middle {
    
       float: none;
    
       display: inline-block;
    
       vertical-align: middle;
    
    }

     

    Bootstrap3登录框自适应水平居中+垂直居中

    https://blog.csdn.net/shenzhen_zsw/article/details/75331515

     

    Bootstrap4 如何让div内部垂直居中:

    给元素定高度

    .login-center {
    
     height: 100vh;
    
    }

     

    应用.align-items-center可以使元素垂直居中:

    <divclass="row align-items-centerjustify-content-center login-center">
    
    …
    
    </div>

    应用. justify-content-center可以使元素水平居中:

    效果:

     

     

     

     

    展开全文
  • $('#requirementCaseTable').bootstrapTable({ cache: false, pageList: [10,15,20,30,50], pagination: true, sidePagination: 'server', //sidePag...
  • 细说BootStrap

    万人学习 2019-07-19 14:21:58
    本课程工34节内容,详细讲述了BootStrap的样式、组件和JavaScript组件。
  • 本篇推荐一款twitter做的bootstrapValidator.js(最好用的bootstrap表单验证插件,没有之一),本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖。
  • kafka消费不到远程bootstrap-server 数据

    万次阅读 2020-12-02 10:17:54
    kafka消费不到远程bootstrap-server 数据 问题 执行 ./bin/kafka-console-consumer.sh --bootstrap-server 10.10.151.12:6667 --topic flink_test 取不到数据没有任何返回,也没有报错 解决 使用./bin/kafka-console...
  • Bootstrap入门

    万次阅读 多人点赞 2018-02-22 16:03:45
    1、什么是Bootrap2、为什么要学习Bootstrap3、哪些项目在使用Bootstrap4、安装和使用5、简单阅读Bootstrap源码6、Bootstrap全局CSS样式7、Bootstrap组件8、Bootstrap插件(了解)9、Bootstrap定制10、Bootstrap学习...
  • bootstrapbootstrap-treeview完整例子

    千次下载 热门讨论 2016-09-02 14:18:08
    强烈建议初次使用bootstrap的人参考,例子很全 bootstrap树控件使用bootstrap-treeview.js实现树前边多选框checkbox 并实现, 0、获取选中的项 1、点击父级的多选框,自己默认选中 2、全选 3、反选 4、展开、 5、...
  • 有人说前端发展太快,框架太多,各有所需,各有所长。看看这幅图,估计都知道这些框架,...bootstrap上大一的时候学html的时候就听老师说过,接触也快一年多了,所以这里准备写一篇关于bootstrap如何自定义导航栏的...
  • Bootstrap3和Bootstrap4区别

    万次阅读 2018-10-26 18:24:11
    Bootstrap3和Bootstrap4区别 首先引入Bootstrap3和4官网连接; Bootstrap3 VS Bootstrap4. 不同点 Bootstrap3 Bootstrap4 Less Sass语言编写 4种栅格类 5种栅格类 使用px为单位 使用rem和em为单位(除...
  • Axure Bootstrap 3 组件

    千次下载 热门讨论 2014-07-28 10:29:21
    Axure Bootstrap 3 组件 支持axure7.x 版本。
  • 1、Bootstrap:Form 表单 在WEB开发过程中,经常遇到需要做表单提交,良好的提示增加用户体验感。在Bootstrap UI使用表单验证,构建登录界面。 2、Bootstrap:引用相关JS和CSS &amp;lt;link href=&quot...
  • Bootstrap可编辑表格

    万次阅读 热门讨论 2015-10-16 17:10:44
    这是居于bootstrap-table进行扩展的功能,bootstrap-table的使用这边就不多说了,日期控件用的是bootstrap-datetimepicker,下拉控件bootstrap-select 这个是小编自己写的 bootstrap-table API地址:ht
  • 前端学习之Bootstrap入门 Bootstrap插件

    千次阅读 2020-04-03 11:11:44
    Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动。利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况下被触发。 站点引用 Bootstrap 插件的方式有...
  • bootstrap demo 源码大全

    千次下载 热门讨论 2014-11-05 22:15:08
    bootstrap demo 大全。非常多的例子。立马上手
  • bootstrap搜索下拉框:bootstrap-select

    万次阅读 2018-02-05 10:52:26
    实现bootstrap搜索下拉框,本文采用bootstrap-select插件;bootstrap-select插件依赖jquery1.8+和bootstrap, 所以需要先引入jquery和bootstrap。 代码: bootstrap 搜索下拉框 ...
  • bootstrap插件bootstrap-select用法

    万次阅读 2018-01-24 17:14:33
    项目中要用到下拉多选,几经查询找到bootstrap-select插件,下面把我在项目中用到的一些记录下来以供参考: 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 需要引入以下css和js文件(如有...
  • 下载Bootstrap

    千次阅读 2018-03-03 22:15:35
    下载Bootstrap在下载Bootstrap之前,请确保你已经安装了一个好用并适合自己的代码编辑器。你可以使用任何文本编辑器,如记事本、写字板、UltraEdit32、EditPlus、NotePad++等等,笔者推荐使用NotePad++ 和EditPlus。...
  • bootstrap-datepicker限定可选时间范围

    万次阅读 多人点赞 2016-02-23 23:38:04
    一、应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,结束时间不能小于开始时间,...引入bootstrap-datepicker.js和boot...
  • Bootstrap--BootstrapDialog

    千次阅读 2017-02-16 17:42:08
    这里有两种展现方式 ...css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js1、通过html代码显示 <!-- Button trigger modal 弹出框的触发器 --
  • Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统, 可以随着设备或视口尺寸的大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的...
  • bootstrap使用入门(bootstrap4.2.1版本)

    千次阅读 多人点赞 2019-02-12 17:47:03
    一、什么是bootstrap? bootstrap是一个前端开发时使用的框架。前端开发主要写HTML5、css3、JavaScript。而bootstrap框架主要为我们提供两个最重要的文件:bootstrap.min.css和bootstrap.min.js。为什么没有.min....
  • Bootstrap Table 获取选中某几行的和 如下图所示,怎样选择任意行,求其和或干其他坏事,(图片有码高清,数据被我隐藏了,看方法就好) 点击上面“获取选中月份总量”按钮,弹出下面的界面,div什么的我不用说了吧 ...
  • Bootstrap 在线引用

    万次阅读 2018-10-17 20:30:22
    Bootstrap 3.3.0 js 文件 &amp;amp;amp;amp;lt;script src=&amp;amp;amp;quot;http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js&amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;...
  • Bootstrap自适应

    千次阅读 2019-04-04 23:32:27
    bootstrap自适应: Bootstrap根据屏幕大小吧设备分为超小屏幕,小屏幕,中等屏幕,大屏幕四种并把屏幕分为12列 对应屏幕宽度为: 超小屏幕(手机):0-768px 对应设置 class=col-xs-number 小屏幕(平板):768-...
  • Bootstrap3 和 Bootstrap4 的区别

    千次阅读 2019-07-14 23:21:16
    Bootstrap3 Bootstrap4 Less预处理 Sass预处理 bootstrap3 共有4种栅格类,依次是: 特小(col-xs-) (<=768px) 小(col-sm-) (>=768px) 中(col-md-) (>=992px) ...
  • Bootstrap介绍

    千次阅读 2017-09-18 18:48:43
    由于bootstrap是基于jquery的所以应用bootstrap.js之前要引用jq。 bootstrap css 简介 前端开发人员习惯使用全局的css文件,bootstrap也是如此。 栅格系统 bootstrap是响应式解决的方案重点就是栅格系统,...

空空如也

1 2 3 4 5 ... 20
收藏数 172,476
精华内容 68,990
关键字:

bootstrap