Bootstrap实战示例
本文提供了两个Bootstrap实战案例，包括常用标签、按钮样式、表格及表单应用，展示了响应式布局和栅格系统的具体实现。
上传一份示例代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--2.默认使用IE edge版本，用来设置IE的浏览器-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"/>
<!--3.meta viewport窗口 - 针对移动端，不用就不写-->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--1.CSS-->
<link rel="stylesheet" href="dist/css/bootstrap.css"/>
<link rel="stylesheet" href="dist/css/prettify.css"/>
<!--4.条件注释语句： 让IE9以下兼容HTML5-->
<!--html5shim.js-->
<!--lt <9
lte <=
gt >
gte >= -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>常用的bootstrap标签</h1>
<small>small标签</small>
<mark>标记标签</mark>
<del>删除标签</del>
<strong>强调标签</strong>
<abbr title="abbtr">属性标签</abbr>
<blockquote >
<p>
Bootstrap优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
</p>
<cite class="pull-right">--来自新浪转载</cite>
</blockquote>
<!--<cite class="pull-right">--来自新浪转载</cite>-->
<!--<pre class="prettyprint linenums">-->
<!--<nav>-->
<!--<ul>-->
<!--<li>1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
<!--<li>4</li>-->
<!--</ul>-->
<!--</nav>-->
<!--<h1>HELLO WORLD!!!!!</h1>-->
<!--<div id="large">-->
<!--只有在最大的时候显示-->
<!--</div>-->
<!--<div id="mid">-->
<!--只有在中等的时候显示-->
<!--</div>-->
<!--<div id="small">-->
<!--只有在最小的时候显示-->
<!--</div>-->
<!--</pre>-->
<h1>button-grounp</h1>
<div class="btn btn-group ">
<button class="btn btn-primary">1</button>
<button class="btn btn-primary">2</button>
<button class="btn btn-primary">3</button>
</div>
<h1>按钮样式</h1>
<div>
<div class="btn btn-default">默认按钮</div>
<button class="btn btn-primary btn-sm">通用样式</button>
<a href="" class="btn btn-danger">警告按钮</a>
<button class="btn btn-success btn-lg">成功按钮</button>
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-block">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link btn-block">Link</button>
</div>
<div>
<table class="table table-striped table-bordered table-hover table-responsive">
<tr class="warning">
<td>订单编号</td>
<td>订单名字</td>
<td>订单总计</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</div>
<div>
<h1>表单</h1>
<!--class="form-inline"-->
<form action="" class="form-horizontal">
<div class="form-group">
<label for="" class="col-lg-2 control-label">用户名:</label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="请输入用户名"/>
</div>
</div>
<div class="form-group">
<label for="" class="col-lg-2 control-label">密码:</label>
<div class="col-lg-10">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group ">
<label for="" class="col-lg-2 control-label">金额:</label>
<div class="col-lg-10 input-group">
<input type="text" class="form-control"/>
<div class="input-group-addon">$</div>
</div>
</div>
</form>
</div>
</div>
<!--5.1首先需要引入jQuery-->
<script src="dist/js/jquery-1.11.3.js"></script>
<!--5.2Bootstrap JS-->
<script src="dist/js/bootstrap.js"></script>
<script src="dist/js/prettify.js"></script>
<script>
$(document).ready(function(){
prettyPrint();
})
</script>
</body>
</html>
另一份示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--2.默认使用IE edge版本，用来设置IE的浏览器-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"/>
<!--3.meta viewport窗口 - 针对移动端，不用就不写-->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--1.CSS-->
<link rel="stylesheet" href="dist/css/bootstrap.css"/>
<!--4.条件注释语句： 让IE9以下兼容HTML5-->
<!--html5shim.js-->
<!--lt <9
lte <=
gt >
gte >= -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
.main{
height:100px;
border:1px solid red;
}
.main div{
border:1px solid blue;
}
</style>
</head>
<body>
<!--1.内容容器:
固定宽度: container
满屏: container-fluid-->
<header class="container-fluid main">
<!--2.行
每一行就是12列
超过12列自动挤下去-->
<!--col-lg-列数/ col-md /col-sm / col-xs 基本的栅格系统
偏移: col-大小-offset-偏移的列数-->
<div class="row">
<div class="col-lg-3 col-md-4 col-lg-push-4 col-xs-6">响应式布局1111</div>
<div class="col-lg-4 col-lg-offset-1 col-lg-pull-4 col-md-4 col-xs-6">响应式布局222</div>
<div class="col-lg-4 col-md-4 col-xs-6"><h1>响应式布局3333</h1>
<div class="row"> <!--1个row有12列
嵌套内容还是会分成12列-->
<div class="col-lg-6">
<p>虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己</p>
</div>
<div class="col-lg-6">
<p>虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 visible-lg">
<h1>这是第一张图片</h1>
<img class="img-responsive img-rounded" src="cat3.jpg" alt=""/>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 hidden-xs">
<h1>这是第二张图片</h1>
<img class="img-responsive img-circle" src="cat3.jpg" alt=""/>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<h1>这是第三张图片</h1>
<img class="img-responsive img-thumbnail" src="cat3.jpg" alt=""/>
</div>
</div>
</header>
<!--5.1首先需要引入jQuery-->
<script src="dist/js/jquery-1.11.3.js"></script>
<!--5.2Bootstrap JS-->
<script src="dist/js/bootstrap.js"></script>
<script>
</script>
</body>
</html>
扫一扫
1111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
