bootstrap-海棠

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>

bootstrap-海棠的更多相关文章

旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
旺财速啃H5框架之Bootstrap（二）
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续上一篇的已经把bootstrap了解个大概了,接 ...
旺财速啃H5框架之Bootstrap（一）
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
[BootStrap] 富编辑器，基于wysihtml5
在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

docker 远程rest api 访问配置
Docker RestApi 的配置及使用 Centos Docker1.12 远程Rest api访问的配置方法 http restapiv1.24 docker sdk for python
使用DOSGi在OSGi环境下发布Web Services
前言 Apache CXF是一个开源的服务框架项目,而Distributed OSGi子项目提供了基于OSGi远程服务规范的分布式组件实现.它使用Web Services,HTTP上的SOAP手段实现 ...
Filter command
1. grep egrep fgrep 2. sort sort -d sort -n sort -r sort -f 3. uniq uniq -d uniq -u uniq -c 4. ...
abbreviation
1. ps------process status 2. tty-----teletype 3. ping----packet internet groper 4. nohup-----no hang ...
设计模式—三种工厂模式(JAVA)
一:简单工厂: 有一个实际工厂,这个工厂只能造一类的产品,这一类产品就是一个产品接口,会有多个具体产品实现这个接口,例如,一个手机厂,生产苹果手机,三星手机: 缺点:在工厂类中集中了所有实例的创建逻 ...
关于v9缓存的那点事
当做好以后模块后,由于是模块原型性能不佳,故而可以用缓存方式来提升效率.缓存生成可以是模块的一个方法或者一个函数,phpcms的缓存也可以分为不同的类型,比如file,memcache.如果是file ...
【MySQL】教程及常用工具和操作
12.MySQL菜鸟教程 http://www.runoob.com/mysql/mysql-data-types.html 3.MySQL Workbench怎么使用及其使用教程 https://j ...
BDE View not exists
Table does not exist. [Microsoft][ODBC SQL Server Driver][SQL Server]对象名 'vw1' 无效.
vertex shader（2）
一次只有一个vertex shader是活跃的.你可以有多个vertex shader,如果一个物体特殊的变换或者灯光,你可以选择合适的vertex shader来完成这个任务. 你可能想使用vert ...
UVALIVE 4556 The Next Permutation
4556 The Next PermutationFor this problem, you will write a program that takes a (possibly long) str ...

bootstrap-海棠

bootstrap-海棠的更多相关文章

随机推荐

热门专题