bootstrap 学习实例及注释
投稿于 被查看 12925 次 评论：162
bootstrap 学习实例及注释
html 代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="padding: 0 30px">
<h3>table table-striped 斑马 table-bordered 边框 table-hover 高亮 table-condensed 紧凑 table-responsive table加一个父级加上这个class名就可以响应式</h3>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Street</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna Awesome</td>
<td>Broome Street</td>
</tr>
<tr>
<td>2</td>
<td>Debbie Dallas</td>
<td>Houston Street</td>
</tr>
<tr>
<td>3</td>
<td>John Doe</td>
<td>Madison Street</td>
</tr>
</tbody>
</table>
</div>
<h2>表单控件</h2>
<h3>表单控件 单选多选 checkbox和radio</h3>
<h4>复选框与按钮换行</h4>
<form role="form">
<!-- checkbox -->
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<!-- radio -->
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" >
喜欢1
</label>
</div>
</form>
<h4>复选框与按钮水平排列</h4>
<form role="form">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" value="option1">游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option2">摄影
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option3">旅游
</label>
</div>
<div class="form-group">
<label class="radio-inline">
<input type="radio" value="option1" name="sex">男性
</label>
<label class="radio-inline">
<input type="radio" value="option2" name="sex">女性
</label>
<label class="radio-inline">
<input type="radio" value="option3" name="sex">中性
</label>
</div>
</form>
<h3>按钮 button</h3>
<p>第二个class名：btn-lg 大 没有这个class 中 btn-sm 小 btn-xs 非常小<br>btn-block 为让按钮充满整宽 btn-block 块状按钮</p>
<p>
<button type="button" class="btn btn-lg btn-default">默认按钮</button>
<button type="button" class="btn btn-lg btn-primary">主要按钮</button>
<button type="button" class="btn btn-lg btn-success">成功按钮</button>
<button type="button" class="btn btn-lg btn-info">行为按钮</button>
<button type="button" class="btn btn-lg btn-warning">警告按钮</button>
<button type="button" class="btn btn-lg btn-danger ">危险按钮</button>
<button type="button" class="btn btn-lg btn-link">链接按钮</button>
</p>
<p>
<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>
</p>
<p>
<button type="button" class="btn btn-sm btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-sm btn-info">Info</button>
<button type="button" class="btn btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-success">Success</button>
<button type="button" class="btn btn-xs btn-info">Info</button>
<button type="button" class="btn btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-xs btn-danger btn-block">Danger</button>
<button type="button" class="btn btn-xs btn-link">Link</button>
</p>
<br>
<img src="images/11.jpg" alt="">
<img src="images/22.png" alt="">
<img src="images/33.png" alt="">
<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>
<h2>图片</h2>
<h3>
只需添加对应名称的class名
1、img-responsive：响应式图片，主要针对于响应式设计<br>
2、img-rounded：圆角图片<br>
3、img-circle：圆形图片<br>
4、img-thumbnail：缩略图片<br>
</h3>
<img alt="140x140" src="http://placehold.it/140x140">
<img class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">
<h3>icon</h3>
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>
<h2>栅格</h2>
<p>1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：<br>
<div class="container"><br>
<div class="row"></div><br>
</div><br>
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12 <br>
3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素 <br>
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响
</p>
<style>
[class *= col-]{
background-color: #eee;
border: 1px solid #ccc;
}
[class *= col-] [class *= col-] {
background-color: #f36;
border:1px dashed #fff;
color: #fff;
}
</style>
<h3>网格应用屏幕</h3>
<img src="http://img.mukewang.com/53e483500001c7f408770494.jpg" alt="">
<br>
<h3>offset 列偏移 <br>col-md-offset-num 偏移几列num=几</h3>
<br>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-7">.col-md-7</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<h3>网格嵌套</h3>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>
<h2>下拉列表 ul模拟select</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="###">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="###">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="###">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="###">下拉菜单项</a></li>
</ul>
</div>
<h4>在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>回复类型选择多图文<li>添加类名“divider”来实现添加下拉分隔线的功能。<br>通过添加“divider”可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）。</h4>
<h5> 给 ul 添加类 <br><br>使用pull-right类使下拉菜单与父容器右边对齐 <br>
使用dropdown-menu-right类使下拉菜单与父容器右边对齐<br>
下拉菜单与父容器左边对齐</h5>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="###">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="###">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="###">下拉菜单项</a></li>
<li role="presentation" class="divider"></li><!-- 下拉分割线 -->
<li role="presentation" class="dropdown-header">第二部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="###">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="###">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="###">下拉菜单项</a></li>
</ul>
</div>
<!-- 导航栏 -->
<h2>导航栏</h2>
<h3>嵌套分组（导航栏二级菜单）</h3>
<div class="btn-group">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">公司简介</a></li>
<li><a href="##">企业文化</a></li>
<li><a href="##">组织结构</a></li>
<li><a href="##">客服服务</a></li>
</ul>
</div>
</div>
<h4>垂直分组 "btn-group-vertical"</h4>
<div class="btn-group-vertical">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">公司简介</a></li>
<li><a href="##">企业文化</a></li>
<li><a href="##">组织结构</a></li>
<li><a href="##">客服服务</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">公司简介</a></li>
<li><a href="##">企业文化</a></li>
<li><a href="##">组织结构</a></li>
<li><a href="##">客服服务</a></li>
</ul>
</div>
<button class="btn btn-default" type="button">联系我们</button>
</div>
<h4>按钮（等分按钮）</h4>
<h5>等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名，如下所示：</h5>
<div class="btn-wrap">
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="##">首页</a>
<a class="btn btn-default" href="##">产品展示</a>
<a class="btn btn-default" href="##">案例分析</a>
<a class="btn btn-default" href="##">联系我们</a>
</div>
</div>
<h4>类tab a 导航</h4>
<h5>标签形导航，也称为选项卡导航。特别是在很多内容分块显示的时，使用这种选项卡来分组十分适合。<br>标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名</h5>
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
<br />
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
<br />
<ul class="nav nav-tabs">
<li ><a href="##">Home</a></li>
<li class="active"><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
<h4>导航（胶囊形(pills)导航）</h4>
<h5>其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”</h5>
<ul class="nav nav-pills">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
<!-- 图片介绍 -->
<img width="300" height="120px" src="http://img.mukewang.com/53e86ee60001711e08160307.jpg" alt="">
<h4>导航（垂直堆叠的导航）</h4>
<h5>除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可</h5>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
<h4>自适应导航栏</h4>
<h5>自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。</h5>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
<h3>二级导航</h3>
<h4>前面介绍的都是使用Bootstrap框架制作一级导航，但很多时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul，使用前面介绍下拉菜单的方法就可以</h4>
<ul class="nav nav-pills">
<li class="active"><a href="##">首页</a></li>
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
…
</ul>
</li>
<li><a href="##">关于我们</a></li>
</ul>
<h3>面包屑航</h3>
<h4>面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。</h4>
<ul class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">我的书</a></li>
<li class="active">《图解CSS3》</li>
</ul>
<h3>搜索表单</h3>
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<br><br><br>
<h3>导航条文本、按钮和链接</h3>
<h4>
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：<br>
1、导航条中的按钮navbar-btn <br>
2、导航条中的文本navbar-text<br>
3、导航条中的普通链接navbar-link<br>
但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。
</h4>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li><a href="##" class="navbar-text">Navbar Text</a></li>
<li><a href="##" class="navbar-text">Navbar Text</a></li>
<li><a href="##" class="navbar-text">Navbar Text</a></li>
</ul>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<div class="nav navbar-nav">
<a href="##" class="navbar-text">Navbar Text</a>
<a href="##" class="navbar-text">Navbar Text</a>
<a href="##" class="navbar-text">Navbar Text</a>
</div>
</div>
<h3>固定导航条</h3>
<h4>.navbar-fixed-top：导航条固定在浏览器窗口顶部<br>
.navbar-fixed-bottom：导航条固定在浏览器窗口底部</h4>
<h3>标签</h3>
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span>
<form action="">
<input type="text" value="11111">
<button onclick="disabled=true">111111</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<div style="height: 300px"></div>
</body>
</html>
用户评论