微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

BootStrap学习笔记

分类：Bootstrap作者：编程之家AI导航网

教程地址：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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Bootstrip HTML 查询搜索常用格式模版
Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&quot;form-inline my-3 d-flex align-items-center justify-content-start&quot; method=&quot;get&quot; action=&q
如何在按钮上加红色数字
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在按钮上显示红色数字。以下是一个例子： &lt;button class=&quot;btn btn-primary&quot;&gt; My Button &lt;span class=&quot;badge badge-dan
让两个按钮左右排列
要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它们放置在同一行中。你可以将按钮放置在两个 col 中，分别占据一定的列宽。以下是你的模板代码做出的修改： {% extends &#39;base.html&#39; %} {% block content %} &lt;div c
status能否设置为布尔值类型，前端采用复选框形式
是的，可以将status设置为布尔类型，这样可以在前端使用复选框形式展示。在模型中的定义可以如下： class Acceptance(models.Model): # ... status = models.BooleanField(default=False) 然后在前端模板中使用{{ form.
Bootstrap 按钮总结
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自己重新定义class类即可，主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
Python学习-day52-bootstrap
起步导入：<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
bootstrap 模态框
（1）modal声明一个模态框（2）modal-dialog定义模态框尺寸（3）modal-lg定义大尺寸模态框（4）modal-sm定义小尺寸模态框（5）modal-header（6）modal-body（7）modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
BootStrap图片样式
图片在Bootstrap版本3中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
bootstrap日期选择
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
bootstrap-treeview 使用小记
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native