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的出现,或皮肤跟网站不匹配, ...
随机推荐
- 第八章 Health Check
8.1 默认的健康检查 每个容器启动时会执行一个进程,此进程由Dockerfile的CMD或ENTRYPOINT指定.如果进程退出时返回码非零,则认为容器发生故障,K8s就会根据restartPoli ...
- Java多线程同步机制（synchronized）
参看:http://enetor.iteye.com/blog/986623
- 两栏自适应布局，右侧div宽高不定
.main,.sitebar{ height: 300px; font: bolder 20px/300px "微软雅黑"; color: bl ...
- java 红包规则
java 红包规则 拼手气红包: 规则:最大金额:全部金额/个数*倍数 最小金额:0.01 最后一个红包是全部金额-领取金额 随机分配 package com.utils; import java.m ...
- Java规则引擎及JSR-94[转]
规则引擎简介 Java规则引擎是推理引擎的一种,它起源于基于规则的专家系统. Java规则引擎将业务决策从应用程序代码中分离出来,并使用预定义的语义模块编写业务决策.Java规则引擎接 ...
- HTTPS的页面发送不了HTTP请求？——关于混合内容
我们都知道HTTPS的页面是发送不了HTTP请求的,那么是什么原因导致HTTPS页面不能发送HTTP请求呢?如果有发送的需求,怎么样才能发送?最近刚好遇到了这个问题,而且搜了半天没搜到靠谱的答案,所以 ...
- Android复杂自定义Listview实现
在Android中实现Listview对新人来说比较难以理解,本人看了若干文章后觉得可以使用以下思路来让新人更好理解(同时也做好记录,免得自己以后忘记). 可参考博客:http://cinderell ...
- 查看DNS服务器
电脑右键查看本地连接 查看状态 然后看DNS
- Spring技术内幕之Spring Data JPA-自定义Repository实现
1.自定义Repository方法接口,让接口的实现类来继承这个中间接口而不是Repository接口 package com.data.jpa.dao; import java.io.Seriali ...
- python：一个轻松的递归逻辑
#递归 age = 10 def dig(n): global age#函数dig引用全局变量age age += 2 n -= 1 if n != 1:#如果满足条件,则调用本身 dig(n) di ...