morrxy

## gist:4656309
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap 101 Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/main.css" rel="stylesheet" media="screen">
  <!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
</head>
<body>

## gist:4656446
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <link rel="stylesheet/less" type="text/css" href="bootstrap.less" />
    <script src="less.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

## gist:4656644

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                morrxy
                / gist:4656644
            
            
              Created
              January 28, 2013 15:53
                — forked from paulirish/gist:4158604
            
          
    Learn JavaScript concepts with the Chrome DevTools

Authored by Peter Rybin	, Chrome DevTools team
In this short guide we'll review some new Chrome DevTools features for "function scope" and "internal properties" by exploring some base JavaScript language concepts.
Closures

Let's start with closures – one of the most famous things in JS. A closure is a function, that uses variables from outside. See an example:

  
## floatCenter.less
/*
float center,add custom css to fco1
<div class="fco fco1">
	<ul class="fci">
		<li class="fi">text1</li>
		<li class="fi">text2</li>
		<li class="fi">text3</li>
	</ul>
</div>
*/

## gist:5011769
<div class="fco fco1">
	<ul class="fci">
		<li class="fi">text1</li>
		<li class="fi">text2</li>
		<li class="fi">text3</li>
	</ul>
</div>

## gist:5011866
<meta charset="UTF-8">

## gist:5011877
<div class="mod">
	<div class="inner">
		<div class="hd">
			<h2>mod title</h2>
		</div>
		<div class="bd">
		</div>
		<div class="ft">
		</div>
	</div>

## mod.less
/*
add custom css to mod1
<div class="mod mod1">
	<div class="inner">
		<div class="hd">
			<h2>mod title</h2>
		</div>
		<div class="bd">
		</div>
		<div class="ft">

## hjlist.less
/*
<ul class="lh">
	<li></li>
</ul>
*/
ul.lh, ol.lh {
	list-style: none;
	overflow:hidden;
	> li {
		float:left;

## gist:5011932
<ul class="lv">
	<li class="lvi">
		<div class="lvd"></div>
	</li>
</ul>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Bootstrap 101 Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/main.css" rel="stylesheet" media="screen">
	<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
	</head>
	<body>
	/*
	float center,add custom css to fco1
	<div class="fco fco1">
	<ul class="fci">
	<li class="fi">text1</li>
	<li class="fi">text2</li>
	<li class="fi">text3</li>
	</ul>
	</div>
	*/
	<div class="mod">
	<div class="inner">
	<div class="hd">
	<h2>mod title</h2>
	</div>
	<div class="bd">
	</div>
	<div class="ft">
	</div>
	</div>
	/*
	add custom css to mod1
	<div class="mod mod1">
	<div class="inner">
	<div class="hd">
	<h2>mod title</h2>
	</div>
	<div class="bd">
	</div>
	<div class="ft">
	/*
	<ul class="lh">
	<li></li>
	</ul>
	*/
	ul.lh, ol.lh {
	list-style: none;
	overflow:hidden;
	> li {
	float:left;
	<ul class="lv">
	<li class="lvi">
	<div class="lvd"></div>
	</li>
	</ul>