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自定义样式-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创建登录注册页面

    万次阅读 多人点赞 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 后端UI框架

    万次阅读 多人点赞 2018-08-10 14:43:43
    工欲善其事,必先利其器 对于从事软件开发的您也一样,有一套熟悉的bootstrap后台ui框架,bootstrap 后端模板让您的开发速度大幅度提升 这是本人经常使用到的一些bootstrap后台框架推荐给大家 第一名 inspinia ...

    工欲善其事,必先利其器 对于从事软件开发的您也一样,有一套熟悉的bootstrap后台ui框架,bootstrap 后端模板让您的开发速度大幅度提升

    这是本人经常使用到的一些bootstrap后台框架推荐给大家

    第一名

    inspinia bootstrap 后端模板  演示地址 http://www.inspinia.net

    效果图

    cn.inspinia.cn

    第二名

    nifty admin  演示地址 http://www.niftyadmin.cn

    效果图

    www.niftyadmin.cn

    第三名

    smartadmin  演示地址 http://smartadmin.com.cn

    效果图

    http://smartadmin.com.cn

    第四名

    color admin 演示地址 http://www.coloradmin.cn

    http://www.coloradmin.cn

    第五名

    quillpro 演示地址 http://cn.inspinia.cn/quillpro/index.html

    效果图

    展开全文
  • 国外最流行的Bootstrap后台管理模板

    万次阅读 2018-08-10 14:46:15
    工欲善其事,必先利其器 对于从事软件开发的您也一样,有一套熟悉的bootstrap后台ui框架让您的开发速度大幅度提升 这是本人经常使用到的一些bootstrap后台框架推荐给大家 第一名 inspinia bootstrap 演示地址 ...
  • bootstrap bootstrap-3.3.7

    2018-03-13 10:08:46
    这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...
  • bootstrap-switch 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-...
  • Bootstrap方法详解——技术与实例

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

    万人学习 2016-07-22 15:21:04
    Bootstrap是目前为流行的前端开发框架之一
  • bootstrap精讲

    2019-02-19 22:52:51
    Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的...本课程有助于学生掌握响应式布局技术,掌握Bootstrap前端框架,快捷的完成前端开发!
  • Bootstrap Matrix Admin

    千次下载 热门讨论 2014-03-26 14:56:59
    Bootstrap Matrix Admin
  • learning bootstrap 4

    2018-11-03 13:25:34
    learning bootstrap 4 learning bootstrap 4learning bootstrap 4learning bootstrap 4learning bootstrap 4learning bootstrap 4learning bootstrap 4learning bootstrap 4learning bootstrap 4learning bootstrap ...
  • 本篇推荐一款twitter做的bootstrapValidator.js(最好用的bootstrap表单验证插件,没有之一),本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖。
  • Bootstrap基础教程

    2018-06-19 11:18:56
    Bootstrap基础教程.pdf Bootstrap简易教程Bootstrap基础教程.pdf Bootstrap简易教程
  • $('#requirementCaseTable').bootstrapTable({ cache: false, pageList: [10,15,20,30,50], pagination: true, sidePagination: 'server', //sidePag...
  • Bootstrap3和Bootstrap4区别

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

    万次阅读 2019-07-08 16:28:12
    网站: ... ... 入门 开始使用BootstrapVue,它基于世界上最流行的框架 - Bootstrap v4,用于使用Vue.js构建响应迅速,移动优先的站点。 Vue.jsv2.6是必需的,v2.6.10建议 引导v4.3是必需的,...
  • Axure Bootstrap 3 组件

    千次下载 热门讨论 2014-07-28 10:29:21
    Axure Bootstrap 3 组件 支持axure7.x 版本。
  • bootstrapbootstrap-treeview完整例子

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

    热门讨论 2017-05-22 14:52:33
    Bootstrap模板
  • bootstrapvalidator

    千次下载 热门讨论 2015-09-24 18:27:43
    bootstrapvalidator,包含所有需要的资源,demo,api
  • 1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1
  • bootstrap treegrid

    千次下载 热门讨论 2014-10-21 17:43:29
    bootstrap treegrid简单说明以及例子代码 用 visual studio 2010或者以上版本运行 asp.net mvc 3的
  • bootstrap前端框架

    2017-09-22 09:04:37
    bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap ...
  • 压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
  • Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap Table API 中文版是一款讲解非常详细的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 474,449
精华内容 189,779
关键字:

bootstrap