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的出现,或皮肤跟网站不匹配, ...
随机推荐
- SQL判断NULL的几种常见方式
第一种 where XX ='NULL' ,XX字段存的值就是NULL这四个字符, 第二种 where XX is null ,XX字段什么也没存,这是数据库的判断语法, 第三种 where isnu ...
- 给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目（可能有多个），返回值是一个包含被删除的重复条目的新数组
Array.prototype.removeCount=function(){ var that=this; var arr=[]; for(var i=0;i<that.length;i++) ...
- Sqlmap用法小结
一共有七个等级0.只显示python错误以及严重的信息.1.同时显示基本信息和警告信息.(默认)2.同时显示debug信息.3.同时显示注入的payload.4.同时显示HTTP请求.5.同时显示HT ...
- PHP memcache client封装
config.inc.php $CONFIG_MEMCACHE['default'] = array( //'127.0.0.1:11211:100', '10.9.20.73:11211:100', ...
- 「小程序JAVA实战」小程序 loading 提示框与页面跳转（37）
转自:https://idig8.com/2018/09/02/xiaochengxujavashizhanxiaochengxu-loading-tishikuangyuyemiantiaozhua ...
- Itext读取PDF模板文件渲染数据后创建新文件
Maven导入依赖 <properties> <itextpdf.version>5.5.0</itextpdf.version> <itext-asian. ...
- vertex shader（2）
一次只有一个vertex shader是活跃的.你可以有多个vertex shader,如果一个物体特殊的变换或者灯光,你可以选择合适的vertex shader来完成这个任务. 你可能想使用vert ...
- selenium安装方式
selenium的二种安装方式 1.在线安装:打开cmd输入, pip.ext install selenium 2.离线安装,下载selenium安装包,然后解压,在cmd中进入到解压的文件中,在运 ...
- iPhone开发随想:rand()还是arc4random()
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://bj007.blog.51cto.com/1701577/544006 今天在iP ...
- Centos7 配置
参考文章: http://www.hksilicon.com/kb/articles/594621/CentOS-7 1. 查看时区是否正确timedatectl,若不正确则设置时区 timedate ...