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的出现,或皮肤跟网站不匹配, ...
随机推荐
- 操作系统-百科：Linux
ylbtech-操作系统-百科:Linux Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNI ...
- 模块初识2-模块的默认保存路径Python36-32\\lib\\site-packages,Python36-32\，标准库和第三方库
import 可以直接导入当前目录的其他脚本 如果你把login.py移动到new_dir的目录下,那么就会提示找不到模块: 要解决这个问题,有两个方法: 1.把login.py复制到C:\\User ...
- Centos7.4 版本环境下安装Mysql5.7操作记录
Centos7.x版本下针对Mysql的安装和使用多少跟之前的Centos6之前版本有所不同的,废话就不多赘述了,下面介绍下在centos7.x环境里安装mysql5.7的几种方法: 一.yum方式安 ...
- css:层叠样式表-网页布局基础
css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...
- sqlserver并发处理，锁和事务
本文系转载,谢谢:http://www.cnblogs.com/cxd4321/archive/2008/12/10/1351792.html 另外这个也不错 http://www.cnb ...
- Nginx压力测试工具之WebBench
Nginx压力测试工具之WebBench 在Apache中有自带的ab命令可以测试服务的压力,而nginx没有自带的命令,必须要采用第三方软件来测试,今天就简单介绍一下webbench对nginx ...
- cookie加密
Cookie中的数据以文本的形式存在客户端计算机,考虑它的安全性,最好在将数据存入Cookie之前对其进行加密. 加密的方法很多,比较简单一点的有:Base64,md5,sha等,而相对比较复杂一点的 ...
- 你知道的，javascript语言的执行环境是"单线程模式"，这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行，因此很多时候需要进行“异步模式”，请列举js异步编程的方法。
回调函数,这是异步编程最基本的方法. 事件监听,另一种思路是采用事件驱动模式.任务的执行不取决于代码的顺序,而取决于某个事件是否发生. 发布/订阅,上一节的"事件",完全可以理解成 ...
- Python小知识点（4）--模块相关
1.模块: 定义:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质就是以.py结尾的python文件(文件名:test.py,对应的模块名:test). 包:用来从逻辑上组 ...
- iOS学习之UIDatePicker控件使用
iOS上的选择时间日期的控件是这样的,左边是时间和日期混合,右边是单纯的日期模式. , 您可以选择自己需要的模式,Time, Date,Date and Time , Count Down Ti ...