BootStrap学习笔记
发布时间：2020-12-17 21:09:37 所属栏目：安全 来源：网络整理
导读：教程地址：http://www.bootcss.com/ 一、模板 !DOCTYPE htmlhtml head titleBootstrap 101 Template/title meta name="viewport" content="width=device-width,initial-scale=1.0" !-- Bootstrap -- link href="css/bootstrap.min.css" rel="stylesheet" med
|
教程地址：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>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |