BootStrap学习笔记

最新推荐文章于 2022-03-30 23:26:34 发布
最新推荐文章于 2022-03-30 23:26:34 发布
阅读量616 收藏
点赞数
分类专栏： CSS 前端 Web BootStrap JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tqtiwvfdn/article/details/38655613
版权
前端 同时被 3 个专栏收录
25 篇文章 0 订阅
订阅专栏
Web
19 篇文章 0 订阅
订阅专栏
CSS
10 篇文章 0 订阅
订阅专栏

教程地址：http://www.bootcss.com/


一、模板

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

二、布局

默认栅格系统 
    <div class="row"><!--栅格不一定要12格,最多12格-->
    	<div class="span4"><div class="content">span4</div></div>
    	<div class="span8"><div class="content">span4</div></div>
    </div>
流式 
   	<div class="row-fluid"><!--栅格一定要12格，最多12格-->
    	<div class="span4"><div class="content">span4</div></div>
    	<div class="span8"><div class="content">span4</div></div>
    </div>

偏移用 样式 offset* 即可

固定布局
样式包括container和container-fluid 
    <div class="row-fluid" style="margin-top:50px;">
    	<div class="container">
    		<div class="content">i am container's content.</div>
    		</div>
    	</div>
    	
    	<div class="row-fluid" style="margin-top:50px;background:none;">
    	<div class="container-fluid">
    		<div class="row-fluid">
    			<div class="span2" style="background-color:#3FC;">span2</div>
    			<div class="span10" style="background-color:#3EC;">span10</div>
    		</div>
    	</div>
    </div>

响应式设计
为了满足不同设备间不同分辨率而设计的，只需在head间加入以下代码： 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">


index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet" type="text/css">
  </head>
  <body style="margin-bottom:100px;">
    <h1>Hello, world!</h1>
    <div class="row"><!--栅格不一定要12格,最多12格-->
    	<div class="span4"><div class="content">span4</div></div>
    	<div class="span8"><div class="content">span4</div></div>
    </div>
    
   	<div class="row-fluid"><!--栅格一定要12格，最多12格-->
    	<div class="span4"><div class="content">span4</div></div>
    	<div class="span8"><div class="content">span4</div></div>
    </div>
    
    <div class="row-fluid" style="margin-top:50px;">
    	<div class="container">
    		<div class="content">i am container's content.</div>
    		</div>
    	</div>
    	
    	<div class="row-fluid" style="margin-top:50px;background:none;">
    	<div class="container-fluid">
    		<div class="row-fluid">
    			<div class="span2" style="background-color:#3FC;">span2</div>
    			<div class="span10" style="background-color:#3EC;">span10</div>
    		</div>
    	</div>
    </div>
    
    <p>this is a paragraph.</p>
    <p class="lead">this is a paragraph with lead.</p>
    <p>
    	<small>this is a small paragraph</small>
    </p>
    
    <p>
    <em>this is em</em><br>
    <i>this is i</i><br>
    <b>this is b</b>
    <strong>this is strong</strong>
    </p>
    
    
    <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    
    <!--使用class=initialism字体小一号-->
    <p>This is a short write <abbr title="sentence" class="initialism">sen</abbr>.</p>
    
    
    <a href="mailto:tqtiwvfdn@163.com">my mail</a>
    
    
    <!--引用-->
    <blockquote>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>
    <blockquote class="pull-right"><p class="lead">My name is Li Jiancheng.</p><em class="pull-right">Li Jiancheng</em></blockquote>
    
    
    
    
    <!--描述-->
    <dl>
    	<dt>this is Title fdsgsdfgsdgsdfgfdsgfgsfdgfdsgfdsgdfsgfdsgfsdgretetgre</dt>
    	<dd>this is content.<br>this is content.this is content.<br>this is content.this is content.</dd>
    </dl>
    
    <dl class="dl-horizontal">
    	<dt>this is horizontal dlgfdsgfdsgsdfgfdsgfgdfgfgfgfgfdsggfsgytytyutrytythfghgfhgfhgfhd</dt>
    	<dd>this is content.<br>this is content.this is content.<br>this is content.this is content.</dd>
    </dl>
    
    <!--代码
    切记要将<>括号进行转义 为 < 和 >
    pre 会将tab也算进去的
    -->
    <p>this is a paragraph with a part of code. <code><this is code ></code></p>
    
    <pre>
    this is a part of code for c program.this is a part of code for c program.this is a part of code for c program.
    this is a part of code for c program.this is a part of code for c program.this is a part of code for c program.
    this is a part of code for c program.this is a part of code for c program.
    </pre>
    
     <pre class="pre-scrollable">
    this is a part of code for c program.this is a part of code for c program.this is a part of code for c program.this is a part of code for c program.
    this is a part of code for c program.this is a part of code for c program.
    this is a part of code for c program.this is a part of code for c program.</pre>

    
    <!--table
    默认样式
    可选类
    -->
    
    <table class="table">
    	<tr><th>#</th><th>Title1</th><th>Title2</th><th>Title3</th></tr>
    	<tr><td>1</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr><td>2</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr><td>3</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    </table>
    <br>
    <!--可选类-->
    <table class="table table-striped">
    	<tr><th>#</th><th>Title1</th><th>Title2</th><th>Title3</th></tr>
    	<tr><td>1</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr><td>2</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr><td>3</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    </table>
        <br>
    <!--圆角-->
    <table class="table table-bordered ">
    	<tr><th>#</th><th>Title1</th><th>Title2</th><th>Title3</th></tr>
    	<tr><td>1</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr><td>2</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr><td>3</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    </table>
    <br>
    <!--hover-->
    <table class="table table-hover">
    	<tr><th>#</th><th>Title1</th><th>Title2</th><th>Title3</th></tr>
    	<tr><td>1</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr><td>2</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr><td>3</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    </table>
    
    <!--显示更紧凑，padding减半-->
      <br>
     <table class="table table-hover table-condensed">
    	<tr><th>#</th><th>Title1</th><th>Title2</th><th>Title3</th></tr>
    	<tr><td>1</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr><td>2</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr><td>3</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    </table>
    
    
     <!--选择情景contextual
     包括success,error,warning,info
     -->
    <br>
     <table class="table table-hover">
     <caption>dsadsadsadsads</caption> <!--表格的标题-->
    	<tr><th>#</th><th>Title1</th><th>Title2</th><th>Title3</th></tr>
    	<tr class="success"><td>0</td><td>Attrib0</td><td>Attrib0</td><td>Attrib0</td></tr>
    	<tr class="error"><td>1</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr class="warning"><td>2</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    	<tr class="info"><td>3</td><td>Attrib1</td><td>Attrib2</td><td>Attrib3</td></tr>
    </table>


	<form>
		<fieldset>
			<legend>
				This is a form
			</legend>
			<dl class="dl-horizontal">
				<dt><label>Label</label></dt>
				<dd><input type="text"></dd>
				<dt><label>Label2</label></dt>
				<dd><select><option>dsadsadsa</option></select></dd>
			</dl>
		</fieldset>
	</form>
	
	
	
	<form class="form-horizontal">
		<div class="control-group">
			<label class="control-label" for="input1">Label1</label>
			<div class="controls">
				<input type="text" id="input1" placeholder="input1">
			</div>
		</div>
		
		
		<div class="control-group">
			<label class="control-label" for="input2">Label2</label>
			<div class="controls">
				<input type="text" id="input2" placeholder="input2">
			</div>
		</div>
	</form>
	
	
	<div class="input-prepend">
		<span class="add-on">Search</span>
		<input class="span2" id="searchInput" type="text">
	</div>
	
	<br>

	<div class="input-append">
		<input class="span2" id="actionInput" type="text">
		<div class="btn-group">
			<button class="btn" data-toggle="dropdown">
				Action
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">Li1</a></li>
				<li><a href="#">Li2</a></li>
				<li class="divider"></li>
				<li><a href="#">Li1</a></li>
			</ul>
		</div>
	</div>
	
	<br>
	<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>



	<br>
	<div class="input-append">
        <input class="span2" id="appendedDropdownButton" type="text">
        <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                Action
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Li1</a></li>
				<li><a href="#">Li2</a></li>
				<li class="divider"></li>
				<li><a href="#">Li1</a></li>
            </ul>
        </div>
    </div>


      <form class="form-search">
          <div class="input-append">
              <input type="text" class="span2 search-query"/>
              <button type="submit" class="btn">Search</button>
          </div>
      </form>







    
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

index2.html 
<!DOCTYPE html>
<html>

<head>
<title>Test On BootStrap</title>

<script src="lib/js/jquery-1.8.3.min.js"></script>
<script src="lib/js/jquery.iDialog.js" dialog-theme="default"></script>



<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" media="screen" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
body {
	font-family: "微软雅黑 Light", "Segoe UI Light", "Arial Unicode MS", 微软雅黑;
}
</style>
</head>

<body>

<div class="navbar navbar-fixed-top navbar-inverse">
	<div class="navbar-inner" style="padding: 0 40px">
		<a class="brand" href="#">爱员工</a>
		<ul class="nav">
			<li class="active"><a href="#">首页</a></li>
			<li class="divider-vertical"></li>
			<li><a href="#">页面1</a></li>
			<li class="divider-vertical"></li>
			<li><a href="#">页面2</a></li>
			<li class="divider-vertical"></li>
		</ul>
		<form class="navbar-search pull-right">
			<input class="search-query" placeholder="Press any keys to search." type="text">
		</form>
	</div>
</div>
<br><br><br><br>
<div class="navbar">
	<div class="navbar-inner">
		<div class="container">
			<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
			<span class="icon-bar"></span><span class="icon-bar"></span>
			<span class="icon-bar"></span><span class="icon-bar"></span></a>
			<a class="brand" href="#">爱员工</a>
			<div class="nav-collapse navbar-responsive-collapse collapse">
				<ul class="nav">
					<li class="active"><a href="#">首页</a></li>
					<li class="divider-vertical"></li>
					<li><a href="#">页面1</a></li>
					<li class="divider-vertical"></li>
					<li><a href="#">页面2</a></li>
					<li class="divider-vertical"></li>
				</ul>
				<form class="navbar-search pull-right">
					<input class="search-query" placeholder="Press any keys to search." type="text">
				</form>
			</div>
		</div>
	</div>
</div>


<div>
	<ul class="breadcrumb">
		<li><a href="#">首页</a><span class="divider">/</span></li>
		<li><a href="#">页面1</a><span class="divider">/</span></li>
		<li><a href="#">页面1.1</a><span class="divider">/</span></li>
	</ul>
</div>

<br><br><br><br>
<div  class="pagination pagination-centered">
	<ul>
		<li class="disabled"><a href="#">«</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">»</a></li>
	</ul>
</div>

<br><br><br><br>
<div>
	<ul class="pager">
		<li class="previous"><a href="#">←Left</a></li>
		<li><a href="#">Pre Page</a></li>
		<li><a href="#">Next Page</a></li>
		<li class="next"><a href="#">→Right</a></li>
	</ul>
</div>


<br><br><br><br>
<div class="hero-unit">
	<h1>Hello world!</h1>
	<p>This is a sentence which to discribe one product.</p>
	<p><a class="btn btn-success btn-large">Learn More</a></p>
</div>

<br><br><br><br>
<div class="page-header">
	<h1>My Header <small>Sub Header</small></h1>
</div>


<br><br><br><br>
<div>
	<ul class="thumbnails">
		<li class="span2">
			<div class="thumbnail">
				<img data-src="holder.js/300x200" src="img/logo.png" alt="xuanLogo" title="log1">
				<h3>Logo</h3>
				<p>This is a log.</p>
			</div>
		</li>
				<li class="span2">
			<a class="thumbnail"><img data-src="holder.js/300x200" src="img/logo.png" alt="xuanLogo" title="log2"></a>
		</li>

		<li class="span2">
			<a class="thumbnail"><img data-src="holder.js/300x200" src="img/logo2.png" alt="xuanLogo" title="log3"></a>
		</li>
		<li class="span2">
			<a class="thumbnail"><img data-src="holder.js/30x20" src="img/logo3.png" style="max" alt="xuanLogo" title="log4"></a>
		</li>
		<li class="span2">
			<a class="thumbnail"><img data-src="holder.js/300x200" src="img/logo4.png" alt="xuanLogo" title="log5"></a>
		</li>

	</ul>
</div>


<div>

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img src="img/logo3.png" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</p>
    </div>
  </li>
</ul>
</div>

<script>
	$("img").click(function(){
		var src=$(this).attr("src"),imgTitle=this.title;
		iDialog({
			id:'showImageDialog' + imgTitle,
			title:imgTitle,
			content:'<img style="max-height:600px;max-width:800px;" src="' + src + '">',
			padding:'0 1px',
			lock:true,
			background:'#AAA'
		});	

	});
</script>

<br><br><br><br>
<div class="alert alert-block alert-success">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<h4>Hello!</h4>
	My Name is Li Jiancheng.
</div>

<br><br><br><br>
<div class="progress">
	<div class="bar" style="width:60%"></div>
</div>
<br><br><br><br>
<div class="progress progress-striped">
	<div class="bar" style="width:60%"></div>
</div>
<br><br><br><br>
<div class="progress progress-striped active">
	<div class="bar" style="width:60%"></div>
</div>
<br><br><br><br>
<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>




<br><br><br><br>
<div class="well">
	<ul class="media-list">
		<li class="media">
			<a class="pull-left">
				<img class="media-object" data-src="holder.js/64x64" src="img/logo.png" style="height:64px;width:64px;"><!--搜索图片懒加载-->
			</a>
			<div class="media-body">
				<h4 class="media-heading">Media Header</h4>
				<p>this is some describe.this is some describe.this is some describe.this is some describe.this is some describe.this is some describe.
				this is some describe.this is some describe.this is some describe.this is some describe.this is some describe.this is some describe.</p>
			</div>
		</li>
		<li class="media">
			<a class="pull-right">
				<img class="media-object" data-src="holder.js/64x64" src="img/logo.png" style="height:64px;width:64px;"><!--搜索图片懒加载-->
			</a>
			<div class="media-body">
				<h4 class="media-heading">Media Header</h4>
				<p>this is some describe.this is some describe.this is some describe.this is some describe.this is some describe.this is some describe.
				this is some describe.this is some describe.this is some describe.this is some describe.this is some describe.this is some describe.</p>
			</div>
		</li>

	</ul>
</div>





<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>

</html>


index3.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Index3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <script src="lib/js/jquery-1.8.3.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
  </head>
  <body>
  
  <dl class="dl-horizontal">
  	<dt>Test For Model</dt>
  	<dd><a href="#modal1" role="button" class="btn btn-primary" data-toggle="modal" data-backdrop="false">Modal1</a></dd>
  </dl>
    <div id="modal1" class="modal hide fade">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    		<h3>Dialog Title</h3>
    	</div>
    	<div class="modal-body">
    		<p>One fine Body.</p>
    	</div>
    	<div class="modal-footer">
    		<a href="#" class="btn btn-info">Botton 1</a>
    		<a href="#" class="btn btn-success">Botton 2</a>
    		<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button>
    	</div>
    </div>
        
    <div class="bs-docs-example">
    	<ul class="nav">
    		<li class="active">Index</li>
    		<li class="dropdown">
    		
    		</li>
    	</ul>
    </div>
    
    
    <br><br>
    <input type="text" data-provide="typeahead" data-source='["aaa","bbb","ccc","zhongjie","zhongguo"]'>
    
    
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>




tqtiwvfdn
关注
专栏目录
bootstrap学习笔记
06-17
在“Bootstrap学习笔记”中，作者强调了为什么应该使用Bootstrap，并介绍了其包内容和如何通过在线实例快速上手。学习笔记中还包含了关于Bootstrap环境的安装指南，包括如何下载Bootstrap和理解其文件结构。作者建议...
Bootstrap学习笔记
06-25
这个是我的前端学习笔记Bootstrap
bootstrap学习笔记一
qq_46095916的博客
03-30 189
一、下载bootstrap 二、解压缩包 三、把得到的三个文件夹复制到vscode工作文件夹中 四、bootstrap概述 bootstrap是一个前端开发的框架，简介灵活 框架是一个半成品软件，开发人员可以在框架的基础上再进行开发，简化编码 好处：定义了很多css样式和js插件 五、bootstrap快速入门 bootstrap中文文档给出的基本模板 <!doctype html> <html lang="zh-CN"> <head>
Bootstrap学习笔记4
qq_52476758的博客
03-02 1770
1. 下拉菜单与滚动监视器1.1 下拉菜单1.1.1 属性声明式方法1.1.2 JavaScript触发方法1.2 滚动监视器1.2.1 滚动监控器的设计1.2.2 声明属性触发滚动监控1.2.3 在body中加监控1.2.4 JavaScript方法触发滚动监控器2. 选项卡、提示框和弹出框2.1 选项卡-Tabs2.1.1 选项卡的结构2.1.2 触发切换效果2.1.3 为选择卡添加fade样式2.1.4 胶囊式选项卡（nav-pills）2.1.5 JavaScript触发方法2.2 提示框-Too.
bootstrap 学习笔记
狗剩的专栏
05-04 965
目录 bootstrap 学习笔记 共计 17讲 3个小时 https://www.bilibili.com/video/BV1TU4y1p7zU?p=1 P1-BootStrap-BootStrap的介绍及下载 11:56 P2-BootStrap-BootStrap的使用与布局容器 15:22 P3-BootStrap-栅格网格系统-列组合与列偏移 20:38 P
Bootstrap学习笔记 01 - 开始
Cynhard的专栏
10-31 458
获取 Bootstrap通过 bower 获取：bower install bootstrap如果用到 jQuery，则可以通过 npm 下载：npm install --save jquery第一个页面<!-- 文档类型，Bootstrap 要求使用 HTML5 doctype --> <!DOCTYPE html> <html> <head> <!-- 使用 utf-8
ECharts源码分析优化
tqtiwvfdn的技术博客
06-01 8303
一、内存优化的原因及解决方案 ECharts在现代浏览器（IE9+、Chrome）下长时间使用，内存的变化并不特别明显。但在IE 8 或以下浏览器长期使用时，则出现内存不断增大的情况。其主要原因是ECharts不同浏览器下实现canvas的代码不一样所指。ECharts在不支持HTML 5的浏览器中，使用Google在06年开发的Explorer Canvas（简称excanvas），模拟can
Html下显示表格插件-handsontable
tqtiwvfdn的技术博客
03-13 3510
options:https://github.com/handsontable/handsontable/wiki/Options 官方网页：http://handsontable.com/ 实例： ({ data: [ ['', '', '千订单差评量', '', '', '', '', '', '', '', ''], ['', '', '
图标插件性能对比报告
tqtiwvfdn的技术博客
05-29 2231
这是我在公司实习期间，要求做一份常用图标插件的报告，花了接近2周的工作日来做的。怎么办，感觉自己效率好低。 本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。 一、简单介绍 二、测试项目及结果 三、综合评分 四、参考资料
关于祥琳望晴-雅晴 | AiY! 备忘录
tqtiwvfdn的技术博客
07-20 1783
一、配置 在本地计算机下配置IIS
如何写些用于装逼的JavaScript代码
tqtiwvfdn的技术博客
08-22 1612
1.如果判断indexOf()==-1的情况： !~(string.index(‘subString’)) 解释： ‘！’是取反的意思。当使用"!!变量"的时候，就是将这个变量布尔化，不过在javaScript的判断 如 if 或 a?b:c中都不要这样做，不过使用布尔化，会显得逼格更高，鲁棒性更强。 ‘~’是按位取反，使用时，会将数字加一取反，如~(-1)=(-1+1)*-1，~5=(5
JS 自定义代码库（持续更新）
tqtiwvfdn的技术博客
03-29 1197
以下代码是在实践中常用到的，所以将其抽取出来，以下代码皆为原创（除已标注的地方），如有雷同，请联系我(188 2649 5458)。将进行持续维护和更新，有些代码会不定期更改，恕不另行通知。 本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。 自定义类 StringBuilder 作用：string拼接效率 //自定义Stringb
表单的radio box toggle其checked值
tqtiwvfdn的技术博客
07-02 910
jQuery方法基于1.8.3 代码： var radio = document.getElementById('myRadio'), container = document.getElementById('container'), str = ''; addRadio(radio); //add
JS 内存优化学习笔记
tqtiwvfdn的技术博客
06-07 740
学习笔记，先挖坑，以后慢慢填 一、定义 内存泄漏：浏览器中使用的内存资源得不到释放，失去对该内存区的指针 闭包：指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)，因而这些变量也是该表达式的一部分。 二、对象 JS可操纵对象有 JS Engine Object、DOM Element、BOM Element //js obj var obj={}
iDrap和iDialog学习笔记
tqtiwvfdn的技术博客
08-15 726
一、iDrag学习笔记 ul+li ul：破碎提哦n
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值