12 缩略图和警告框

<p class='alert alert-info'>这个是警告组<button class='close' data-dismiss='alert'>&times</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>

　　

最新文章

  1. DHtmlx组件获取选中行的某一列对应的值
  2. swift-重写方法和属性、禁止重写
  3. kegg-kass注释--转载
  4. CSS外边距margin上下元素重叠
  5. C# 实现软件的重启
  6. 使用CSS和jQuery实现对话框
  7. is running beyond physical memory limits. Current usage: 2.0 GB of 2 GB physical memory used; 2.6 GB of 40 GB virtual memory used
  8. 爬虫的自我解剖(抓取网页HtmlUnit)
  9. 关于actionscript中新建一个sprite，设置大小（宽高）的问题。
  10. （转载）js----对象直接量
  11. nginx 安装启动
  12. VMware-VCSA-6.5安装过程
  13. mysq参数sql_safe_updates限制范围
  14. 通过cmd 使用 InstallUtil.exe 命令 操作 windows服务 Windows Service
  15. Mysql 数据类型、约束类型
  16. 学习 MeteoInfo二次开发教程（三）
  17. Linux服务器性能评估
  18. Spring @Value注解 and Spring Boot @ConfigurationProperties注解
  19. 2017-2018-2 20165327 实验三《敏捷开发与XP实践》实验报告
  20. ArrayList实现原理及源码分析之JDK8

热门文章

  1. [Web]网址净化方法
  2. [Java][Web]解决 Request 的乱码
  3. Hibernate 一对一、一对多、多对多注解cascade属性的总结
  4. Shell教程快速入门
  5. python做语音信号处理
  6. 【BZOJ】2743: [HEOI2012]采花（树状数组）
  7. ORACLE删除字段（set unused的用法）
  8. OD 实验(十一) - 对一个程序的破解
  9. 五、配置jenkins定时构建或上游job触发构建
  10. Django的contenttypes应用、缓存相关