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>
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的出现,或皮肤跟网站不匹配, ...
随机推荐
- mysql 存储过程简单学习
转载自:http://blog.chinaunix.net/uid-23302288-id-3785111.html ■存储过程Stored Procedure 存储过程就是保存一系列SQL命令的集合 ...
- 用php命令执行php脚本报错，在浏览器里执行却正常。
写了一个Php脚本,里面用到了PDO连接数据库,但是所有的库都已经安装,在浏览器里执行完全正常,但是写到批处理文件里用php命令去执行的时候却报错找不到驱动,很奇怪. 经查找得知原来php命令与浏览器 ...
- java实现二叉树demo
二叉树(BinaryTree)是n(n≥0)个结点的有限集,它或者是空集(n=0),或者由一个根结点及两棵互不相交的.分别称作这个根的左子树和右子树的二叉树组成. 这个定义是递归的.由于左.右子 ...
- JavaScript中的跨域详解（一）
同源策略 所谓的同源策略,指的是浏览器对不同源的脚本或者文本访问方式进行的限制. 所谓同源,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可. 同源政策的目的,是为了保证用户信 ...
- nova volume-create的使用
处理cinder可以直接创建volume外,nova也是可以的 如: 可以看出创建一个名字为volume2的卷,大小为10G 把创建好的volume2卷直接挂在vm虚拟机上 如:先查看计算节点有几个v ...
- 面试宝典：Java面试中最高频的那20%知识点！
Java目前已经不仅仅是一门开发语言,而是一整套生态体系. 作为一个Java程序员,既是幸运的,也是不幸的.幸运的是我们有很多轮子可以拿过来用,不幸的是我们有太多的轮子需要学习. 但是,无论是日常工作 ...
- day9-IO心得
Gevent协程 Select\Poll\Epoll异步IO与事件驱动 Python连接Mysql数据库操作 RabbitMQ队列 Redis\Memcached缓存 Paramiko SSH Tws ...
- GIL与线程、进程、协程
GIL全局解释器锁: 1.相信大家都知道python代码是不能直接被机器cpu识别和执行的,它要经过python解释器(也就是我们执行时候的python3 name.py)被编译成机器语言,pytho ...
- vue设置title和ioc图标
vue设置ioc图标和title 1.ioc图标设置 在根目录中的index.html中引入代码: <link rel="shortcut icon" type=" ...
- [转] FTP主动模式和被动模式的区别
转自原文FTP主动模式和被动模式的区别 基础知识: FTP只通过TCP连接,没有用于FTP的UDP组件.FTP不同于其他服务的是它使用了两个端口, 一个数据端口和一个命令端口(或称为控制端口).通常2 ...