bootstrap-海棠
12 缩略图和警告框
<p class='alert alert-info'>这个是警告组<button class='close' data-dismiss='alert'>×</button>
请注意上方的 button里面，class以及 data-dismiss
缩略图
class = "thumbnail"
class="caption" 增加间距
<div class="col-lg-3"> <div class="thumbnail"> <a href='www.baidu.com'> <img src="img/a.JPG"> </a> <div class="caption"> <h3>海棠学院</h3> <p>专注于前段培训专注于前段培训专注专注于前段培训专注于前段培训专注专注于前段培训专注于前段培训专注专注于前段培训专注于前段培训专注专注于前段培训专注于前段培训专注专注于前段培训专注于前段培训专注于前段培训专注于前段培训专注于前段培训</p> <p><a href='#' class='btn btn-primary'>杨玉秋</a> <a href='#' class='btn btn-primary'> 王军</a> </p> </div> </div> </div>
3.4 提示标签
<a href='#' class='tool' data-placement='top' data-toggle='tooltip' title='hello'> <button class='btn btn-info btn-sm tool btnshow' data-toggle='tooltip' title='hello' >杨玉秋</button>
需要些一段script代码 <script> $(".tool").tooltip();
$(".btnshow").tooltip("show"); </script>
tooltip 加入参数 ‘show’，默认是显示该tooltip
3.5 提示框
<button class='btn btn-danger' data-content='这是弹框的内容这是弹框的内容这是弹框的内容这是弹框的内容这是弹框的内容这是弹框的内容这是弹框的内容'
title="请注意" data-toggle='popover'
data-placement='top'>点击我</button>
<button class='btn btn-danger btnshow' data-content='这是弹框的内容这是弹框的内容这是弹框的内容这是弹框的内容这是弹框的内容这是弹框的内容这是弹框的内容'
title="请注意" data-toggle='popover'
data-placement='top'>点击我</button>
<script>
$(".btn").popover();
</script>
2.8 2.9 导航条
导航条2:
navar: 导航条的基础样式
nav navbar-nav 导航条里面的菜单固定样式组合class
navbar-defautl : 导航条默认样式
navbar-inverse : 导航条是黑色
navbar-static-top : 直角导航
navbar-fixed-top : 固定顶部，需要给body增加一个padding:50px;
navbar-fixed-bottom : 固定底部
navbar-brand 用来放 logo，需要配合navbar-header 使用
navbar-right 内容以右边对齐
navbar-text 导航中有文字，加入此class
navbar-link 如果有链接，加入此class
navbar-btn 只有一个按钮是，给按钮家一个 navbar-btn
navbar-form navbar-left 如果导航中有form，需要添加左侧两class
-->
<!-- 一般情况下，container 包在 navar 里面-->
<nav class='navbar navbar-default'>
<div class="container">
<div class='navbar-header'>
<a href='#' class='navbar-brand'>logo</a>
</div>
<ul class='nav navbar-nav'>
<li><a href='#'>Html</a></li>
<li class='active'><a href='#'>javascript</a></li>
<li><a href='#'>css</a></li>
<li><a href='#'>hpp</a></li>
</ul>
</div>
</nav>
<!-- 一般情况下，container 包在 navar 里面-->
<nav class='navbar navbar-default'>
<div class="container">
<div class='navbar-header'>
<a href='#' class='navbar-brand'>logo</a>
</div>
<ul class='nav navbar-nav'>
<li><a href='#'>Html</a></li>
<li class='active'><a href='#'>javascript</a></li>
<li><a href='#'>css</a></li>
<li><a href='#'>hpp</a></li>
</ul>
<ul class='nav navbar-nav navbar-right'>
<li><a href='#'>登录</a></li>
<li><a href='#'>注册</a></li>
</ul>
</div>
</nav>
<!-- 有链接和文字导航条-->
<nav class='navbar navbar-default'>
<div class="container">
<div class='navbar-header'>
<a href='#' class='navbar-brand'>logo</a>
</div>
<ul class='nav navbar-nav'>
<li><a href='#'>Html</a></li>
<li class='active'><a href='#'>javascript</a></li>
<li><a href='#'>css</a></li>
<li><a href='#'>hpp</a></li>
</ul>
<a href='#' class='navbar-text navbar-link'>俩呢及</a>
<p class='navbar-text'>这里是一段文字</p>
<ul class='nav navbar-nav navbar-right'>
<li><a href='#'>登录</a></li>
<li><a href='#'>注册</a></li>
</ul>
</div>
</nav>
<!-- 有表单的导航条-->
<nav class='navbar navbar-default'>
<div class="container">
<div class='navbar-header'>
<a href='#' class='navbar-brand'>logo</a>
</div>
<ul class='nav navbar-nav'>
<li><a href='#'>Html</a></li>
<li class='active'><a href='#'>javascript</a></li>
<li><a href='#'>css</a></li>
<li><a href='#'>hpp</a></li>
</ul>
<button class='btn btn-default navbar-btn'>搜索</button>
<form actiion='apecleas.php' class='navbar-form navbar-left'>
<input type='text' class='form-control'>
<button class='btn btn-default'>搜索</button>
</form>
<ul class='nav navbar-nav navbar-right'>
<li><a href='#'>登录</a></li>
<li><a href='#'>注册</a></li>
</ul>
</div>
</nav>
2.14 图文混排
<!--
图文混排
media 代表图文混排
media-left 图片的区域，在左边显示
media-right 图片区域，右边显示
media-body 内容区域
media-heading 内容区域标题
混排类似留言板，放到 media-body 中，从media开始复制 嵌套即可
media-middle 根据右侧内容的高度，自动垂直居中
media-bottom 图片根据内容底部对齐
-->
<div class="container">
<!-- 图片左边 -->
<div class="row">
<div class='media'>
<a href='#' class='media-left media-middle'> <img src='img/a.jpg'
style='width: 100px; height: 100px;' />
</a>
<div class='media-body'>
<h4 class='media-heading'>海棠学院</h4>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
</div>
</div>
</div>
<!-- 左右都有图片 -->
<div class="row">
<div class='media'>
<a href='#' class='media-left'> <img src='img/a.jpg'
style='width: 100px; height: 100px;' />
</a>
<div class='media-body'>
<h1 class='media-heading'>海棠学院</h1>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
</div>
<a href='#' class='media-right media-bottom'> <img src='img/a.jpg'
style='width: 100px; height: 100px;' />
</a>
</div>
</div>
<!-- 混排嵌套 -->
<div class="row">
<div class='media'>
<a href='#' class='media-left'> <img src='img/a.jpg'
style='width: 100px; height: 100px;' />
</a>
<div class='media-body'>
<h4 class='media-heading'>海棠学院</h4>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<div class='media'>
<a href='#' class='media-left'> <img src='img/a.jpg'
style='width: 100px; height: 100px;' />
</a>
<div class='media-body'>
<h4 class='media-heading'>海棠学院</h4>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
</div>
</div>
<p>专注前段培训专注前段培训 专注前段培训 专注前段培训 专注前段培训</p>
</div>
</div>
</div>
</div>
3.6 单个折叠菜单和折叠菜单组
<!--
折叠菜单 单个
panel-heading 标题区域
panel-title 标题
panel-body panel内容区域
panel-title 中 a 标签，增加 data-toggle 和 data-target
panel-body 因该类中有默认的padding,所以在加一个外层的div ，没有吸上的那种感觉，内容区域不能有padding
panel-body 的外层 div ,需要讲一个 in class
折叠菜单 一组
panel-group 吧所有的panel放到一个父级，并添加panel-group class, 并加一个id aaa
data-parent 指向panel-group id
-->
<div class="container">
<div class='row'>
<div class='col-lg-5'>
<!-- 折叠菜单 一组 -->
<div class='panel-group' id='accordion'>
<div class='panel panel-success '>
<div class='panel-heading'>
<h3 class='panel-title' data-parent='#accordion' data-toggle='collapse' data-target='#cona'>海棠学院
</h3>
</div>
<!-- 请注意此处的类 ，默认是展开该类 in 的作用-->
<div id="cona" class='in collapse'>
<div class='panel-body'>专注啊实打实地方专注啊实打实地方 专注啊实打实地方</div>
</div>
</div>
<div class='panel panel-default '>
<div class='panel-heading'>
<h3 class='panel-title' data-parent='#accordion' data-toggle='collapse' data-target='#conb'>海棠学院</a>
</h3>
</div>
<div id="conb" class='collapse'>
<div class='panel-body'>专注啊实打实地方专注啊实打实地方 专注啊实打实地方</div>
</div>
</div>
</div>
<!-- 单个pannel -->
<div class='panel panel-default '>
<div class='panel-heading'>
<h3 class='panel-title'>
<a href='#' data-toggle='collapse' data-target='#con1'>海棠学院</a>
</h3>
</div>
<div id="con1" class='in'>
<div class='panel-body'>专注啊实打实地方专注啊实打实地方 专注啊实打实地方</div>
</div>
</div>
<div class='panel panel-default '>
<div class='panel-heading'>
<h3 class='panel-title'>
<a href='#' data-toggle='collapse' data-target='#con2'>海棠学院</a>
</h3>
</div>
<div id="con2" class='in'>
<div class='panel-body'>专注啊实打实地方专注啊实打实地方 专注啊实打实地方</div>
</div>
</div>
</div>
</div>
</div>
浙公网安备 33010602011771号