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自定义样式-bootstrap侧边导航栏的实现

    万次阅读 多人点赞 2017-07-25 11:40:18
    使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配 3. 侧滑栏的侧滑效果不使用jquery方法来实现,使用的是css3 transforms属性进行div的移动,侧滑的动画效果使用的是...

    bootstrap侧边导航栏实现原理

    1. 侧滑栏使用定位fixed
    2. 使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配
    3. 侧滑栏的侧滑效果不使用jquery方法来实现,使用的是css3 transforms属性进行div的移动,侧滑的动画效果使用的是css属性transition
    4. 缺点:使用两套菜单,一套是pc端屏幕显示的菜单,一套是移动端显示的手机导航菜单,这个缺点比较明显,生成无关的标签,优点代码少,简单容易接受

    效果图

    bootstrap侧边导航栏
    这里写图片描述

    bootstrap导航栏布局

        <!--手机导航栏-->
        <div id="mobile-menu" class="mobile-nav visible-xs visible-sm">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">Java</a></li>
                <li><a href="#">SVN</a></li>
                <li><a href="#">iOS</a></li>
            </ul>
        </div>
        <!--pc导航栏-->
        <nav class="navbar-inverse visible-lg visible-md" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">菜鸟教程</a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">iOS</a></li>
                        <li><a href="#">SVN</a></li>
                        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--手机导航栏侧滑-->
        <div class="nav-btn visible-xs visible-sm">
            <a href="#" class="mobile-nav-taggle" id="mobile-nav-taggle">
                <span class="glyphicon glyphicon-align-justify"></span>
            </a>
        </div>
    

    一个导航栏的布局,用了两个导航菜单,一个是pc端的,一个是手机端,利用bootstrap响应式使用工具类visible-xs visible-sm来实现pc端隐藏切换按钮; visible-lg visible-md 实现了pc端显示导航栏;visible-xs visible-sm实现手机端显示手机导航栏。
    bootstrap响应式工具类详见:https://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html

    css实现布局和侧滑效果(侧滑的关键css3属性transform、transition)

    代码不多,仅仅10行

             * {margin:0;padding:0;}
             #mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;background-color:#373737;z-index:9999;}
             a:hover ,a:focus{text-decoration:none}
            .mobile-nav ul li a {color:gray;display:block;padding:1em 5%;    border-top:1px solid #4f4f4f;border-bottom:1px solid #292929;transition:all 0.2s ease-out;cursor:pointer;#mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;background-color:#373737;z-index:9999;transition:all 0.3s ease-in;}}
            .mobile-nav ul li a:hover {background-color: #23A1F6;color: #ffffff;}
            .show-nav {transform:translateX(0);}
            .hide-nav {transform:translateX(-220px);} /*侧滑关键*/
            .mobile-nav-taggle {height:35px;line-height:35px;width:35px;background-color:#23A1F6;color:#ffffff;display:inline-block;text-align:center;cursor:pointer}
            .nav.avbar-inverse{position:relative;}
            .nav-btn {position:absolute;right:20px;top:20px;}
    

    要值得注意的是css3的两个属性:
    transform:旋转div,支持元素2D或3D旋转,属性值translateX(X)就是在X轴上移动Xpx的距离
    http://www.w3school.com.cn/cssref/pr_transform.asp
    而侧滑的动画效果是使用transition属性,设置属性的过渡动画的效果,语法
    transition: property duration timing-function delay;
    http://www.w3school.com.cn/cssref/pr_transition.asp

    单击事件切换侧滑

            $("#mobile-nav-taggle").click(function () {
                var mobileMenu = $("#mobile-menu");
                if (mobileMenu.hasClass("show-nav")) {
                    setTimeout(function () {
                        mobileMenu.addClass("hide-nav").removeClass("show-nav");
                    }, 100)
                }
                else {
                    setTimeout(function (){
                        mobileMenu.addClass("show-nav").removeClass("hide-nav");
                    }, 100)
                }
            })
    

    总结

    不推荐用两个菜单导航栏,缺点很明显,为了实现效果而已,不要介意,其实用一个菜单导航栏也是可以实现,试试media 完全可以实现。
    代码下载:http://download.csdn.net/detail/kebi007/9909725
    作者:张林
    标题:bootstrap自定义样式-bootstrap侧边导航栏的实现
    原文地址:http://blog.csdn.net/kebi007/article/details/76038251
    转载随意注明出处

    有兴趣的可以关注一下我的微信公众号[dotNet全栈开发],分享一些编程相关的经典文章
    在这里插入图片描述

    展开全文
  • 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 datetimepicker 日期插件超详细使用方法

    万次阅读 多人点赞 2017-08-13 15:00:50
    目前,bootstrap有两种日历。datepicker和datetimepicker,后者是前者的拓展。 Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图、年视图、月视图、日视图、小时视图 使用时需要导入相应的CSS和...

    日期时间选择器

    目前,bootstrap有两种日历。datepicker和datetimepicker,后者是前者的拓展。

    Bootstrap日期和时间组件:

    使用示例:

    从左到右依次是十年视图、年视图、月视图、日视图、小时视图

    使用时需要导入相应的CSS和js文件:

     

    可选的日期格式:

    • yyyy-mm-dd
    • yyyy-mm-dd hh:ii
    • yyyy-mm-dd hh:ii:ss

     

    HTML部分代码:

    <div class="form-group">
                    <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                    <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                        <input class="form-control" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input1" value="" /><br/>
                </div>
     

    JS部分代码:

    $('.form_datetime').datetimepicker({
            weekStart: 0, //一周从哪一天开始
            todayBtn:  1, //
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1
        });

    选项:

    weekStart

    Integer. 默认值:0

    一周从哪一天开始。0(星期日)到6(星期六)

    startDate

    Date. 默认值:开始时间

    endDate

    Date. 默认值:结束时间

    autoclose

    Boolean. 默认值:false

    当选择一个日期之后是否立即关闭此日期时间选择器。

    startView

    Number, String. 默认值:2, 'month'

    日期时间选择器打开之后首先显示的视图。 可接受的值:

    • 0 or 'hour' 为小时视图
    • 1 or 'day' 为天视图
    • 2 or 'month' 为月视图(为默认值)
    • 3 or 'year'  为年视图
    • 4 or 'decade' 为十年视图

    todayBtn

    Boolean, "linked". 默认值: false

    如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话,"Today" 按钮仅仅将视图转到当天的日期,如果是"linked",当天日期将会被选中。

    todayHighlight

    Boolean. 默认值: false

    如果为true, 高亮当前日期。

    keyboardNavigation

    Boolean. 默认值: true

    是否允许通过方向键改变日期。

    日期时间选择器提供了键盘导航:

    up, down, left, right 方向键

    这些方向键中,left/right 向后/向前 一天,up/down 向后/向前 一周。

    配合shift键,up/left 向后退一个月,down/right 向前进一个月。

    配置ctrl键,up/left 向后退一年,down/right 向前进一年。

    Shift+ctrl 和 ctrl 同等效果 - 也就是说,他们不能同时改变月和年,只能单独改变年。

    language

    String. 默认值: 'en'; 可以通过导入对应语言的js文件来设置语言

    forceParse

    Boolean. 默认值: true

    当选择器关闭的时候,是否强制解析输入框中的值。

     方法:

    .datetimepicker(options)

    初始化日期时间选择器。

    remove

    参数: None

    移除日期时间选择器。同时移除已经绑定的event、内部绑定的对象和HTML元素。

    $('#datetimepicker').datetimepicker('remove');

    show

    参数: None

    显示日期时间选择器。

    $('#datetimepicker').datetimepicker('show');

    hide

    参数: None

    隐藏日期时间选择器。

    $('#datetimepicker').datetimepicker('hide');

    update

    参数: None

    使用当前输入框中的值更新日期时间选择器。

    $('#datetimepicker').datetimepicker('update');

    setStartDate

    参数:

    • startDate (String)

    给日期时间选择器设置一个新的起始日期。

    $('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');

    setEndDate

    参数:

    • endDate (String)

    给日期时间选择器设置结束日期。

    $('#datetimepicker').datetimepicker('setEndDate', '2012-01-01');
    
     
    
     
    
     
    ________________________________________________________________
    附另一种简单好用的日历插件
    
     

    关于日历插件使用说明

    本插件仅需要引入一个js文件,外加部分css样式(也可以不引入),以及input标签

    一、解压后框架如图所示

     

    二、打开test.html文件部署到项目中去,将laydate整个文件夹都放入项目,(一定要把laydate放入整个项目中,不用单独只放js文件,不然不会有效果,里面的文件也不需要删除)如图为页面需要引入的文件

     

    三、界面如下,点击input框日历自己会弹出,简洁美观

     

    下载地址:http://www.layui.com/laydate/

    最后进入网址点击下载即可,更多功能在此官方网站上获取

    展开全文
  • 本篇推荐一款twitter做的bootstrapValidator.js(最好用的bootstrap表单验证插件,没有之一),本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖。
  • Bootstrap完美select标签下拉菜单实现

    万次阅读 多人点赞 2018-08-25 14:00:01
    Bootstrap&amp;amp;amp;amp;amp;lt;select&amp;amp;amp;amp;amp;gt;下拉菜单实现 初级者使用bootstrap框架时,大部分对官方提供的下拉菜单dropdown组件不是很感冒! 所以,这里就提供简单原生下拉标签&...
  • bootstrap简介

    万次阅读 热门讨论 2015-01-17 16:49:43
    1.1. 什么是 BootstrapBootstrap 是一个用于快速开发 Web应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 1.2. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 JacobThornton 开发的...
  • Bootstrap方法详解——技术与实例

    万次阅读 多人点赞 2016-11-17 14:33:32
    一、Introduction 如果说到Bootstrap你会想到什么?是Twitter推出的那个用于前端开发的开源工具包吗?Unfortunately,本文要讨论的并非是...机器学习中的Bagging,AdaBoost等方法其实都蕴含了Bootstrap的思想...
  • $('#requirementCaseTable').bootstrapTable({ cache: false, pageList: [10,15,20,30,50], pagination: true, sidePagination: 'server', //sidePag...
  • 有人说前端发展太快,框架太多,各有所需,各有所长。看看这幅图,估计都知道这些框架,...bootstrap上大一的时候学html的时候就听老师说过,接触也快一年多了,所以这里准备写一篇关于bootstrap如何自定义导航栏的...
  • 细说BootStrap

    万人学习 2019-07-19 14:21:58
    本课程工34节内容,详细讲述了BootStrap的样式、组件和JavaScript组件。
  • 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-...
  • bootstrapbootstrap-treeview完整例子

    千次下载 热门讨论 2016-09-02 14:18:08
    强烈建议初次使用bootstrap的人参考,例子很全 bootstrap树控件使用bootstrap-treeview.js实现树前边多选框checkbox 并实现, 0、获取选中的项 1、点击父级的多选框,自己默认选中 2、全选 3、反选 4、展开、 5、...
  • bootstrap模版如何使用

    2017-09-15 23:06:23
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js">...
  • 我在bootstrap table中的field中定义的formatter formatter:function(value,row,index){ if (value == undefined) { value = "选择"; } var html = ""; ...
  • 下载Bootstrap

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

    2016-07-28 09:46:08
    $("#table_report").bootstrapTable({ method: "get",//post取不到数据 url: "station/list", dataType: "json", striped:true, toolbar:"#toolbar", idField:"id", ...
  • Axure Bootstrap 3 组件

    千次下载 热门讨论 2014-07-28 10:29:21
    Axure Bootstrap 3 组件 支持axure7.x 版本。
  • <link rel="stylesheet" type="text/css" href="../include/bootstrap-3.3.4/plugins/datepicker/css/bootstrap-datepicker.min.css" /> $(function(){ $('.input-group.date').datepicker({ format: "yyyy-...
  • 最近一直在研究bootstrap这东西,确实是个好的框架,但是诸多优势背后也隐藏着一些不好的地方,对此,我把它和另一套响应式框架jquery mobile做了一下对比,我的总结如下: 1、bootstrap的class类定义杂乱,没有...
  • 第一步:在Python虚拟环境中安装了bootstrap的Flask扩展:pip install flask-bootstrap, 第二步:在py文件中 ``` from flask import Flask, render_template from flask.ext.bootstrap import Bootstrap ...
  • bootstrap demo 源码大全

    千次下载 热门讨论 2014-11-05 22:15:08
    bootstrap demo 大全。非常多的例子。立马上手
  • !...jq是通过cnpm直接安装的,packjson里有"jQuery...import './assets/css/bootstrap-theme.min.css'; import './assets/js/bootstrap.min'; bootstrap文件 也放在了assets中的css和js中。。但是还是报错。。 求大神解惑
  • window.operateRebateEvents = { 'click .removeRebate': function (e, value, row, index) { ... 这是用的bootstrap-table中事件监听,但是隔了不久,点击删除按钮没有任何反应,也没有报错就很纳闷儿,求大神赐教
  • 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网页模板

    千次阅读 2018-03-03 22:18:02
    创建Bootstrap网页模板只需要两步:第一步,安装Bootstrap的样式。只要使用 Bootstrap,就必须调用它的基本样式文件 bootstrap.css。另外,如果需要,可以使用项目的自定义样式 self.css 来覆盖 Bootstrap 的一些...
  • Bootstrap 对齐方式

    万次阅读 2018-03-05 09:30:08
    对齐方式为块级元素应用表示对齐的类,让其中的行内级元素左对齐、或居中对齐、或右对齐,.text-left 表示左对齐,.text-center 表示居中对齐,.text-right 表示右对齐。如:&lt;p class="...
  • $('#reportTable').bootstrapTable({ //数据来源的网址 url:'/index.xhtml', method: 'post', editable:true,//开启编辑模式 clickToSelect: true, showPaginationSwitch:true, //显示...
  • BootStrap bootstrap日历控件

    千次阅读 2018-11-15 10:19:15
    位置:https://www.layui.com/laydate/ 原创博客:https://blog.csdn.net/qq_28633249/article/details/77142352  代码如下: &lt;%@ page language="java" import="...String p...

空空如也

1 2 3 4 5 ... 20
收藏数 117,879
精华内容 47,151
关键字:

bootstrap