[布局]bootstrap基本标签总结2
缩略图
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
</a>
</div>
…
</div>
</div>
还可以添加标题、说明、按钮,添加caption容器。
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" style="height: 180px; width: 100%; display: block;" alt="">
</a>
<div class="caption">
<h3>Bootstrap框架系列教程</h3>
<p>Bootstrap框架是一个优秀的前端框,就算您是一位后端程序员或者你是一位不懂设计的前端人员,你也能依赖于Bootstrap制作做优美的网站...</p>
<p>
<a href="##" class="btn btn-primary">开始学习</a>
<a href="##" class="btn btn-info">正在学习</a>
</p>
</div>
</div>
…
</div>
</div>
警示框
1、成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色;
2、信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色;
3、警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,具体呈现的是背景、边框、文本都是浅黄色;
4、错误警示框:提示用户操作错误,在“alert”样式基础上追加“alert-danger”样式,具体呈现的是背景、边框和文本都是浅红色。
<div class="alert alert-success" role="alert">恭喜您操作成功!</div>
进度条
提供了两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式,而progress-bar用于限制进度条的进度。
<div class="progress">
<div class="progress-bar" style="width:40%"></div>
</div>
媒体对象
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">系列:十天精通CSS3</h4>
<div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div>
</div>
</div>
列表组
<ul class="list-group">
<li class="list-group-item">揭开CSS3的面纱</li>
<li class="list-group-item">CSS3选择器</li>
<li class="list-group-item">CSS3边框</li>
<li class="list-group-item">CSS3背景</li>
<li class="list-group-item">CSS3文本</li>
</ul>
在列表项的任何区域都可点击
.list-group-item中可以包括:.list-group-text, .list-group-heading
.list-group-item可以设置:.active .disabled .list-group-item-success
<div class="list-group">
<a href="##" class="list-group-item">图解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
<a href="##" class="list-group-item">玩转Bootstrap</a>
</div>
面板
<h3>面板中嵌套列表组(一)</h3>
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">
<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
</p>
<ul class="list-group">
<li class="list-group-item">我是列表项</li>
<li class="list-group-item">我是列表项</li>
<li class="list-group-item">我是列表项</li>
</ul>
</div>
<div class="panel-footer">作者:大漠</div>
</div>
弹出框
modal
1.button触发
<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态弹出窗内容 -->
<div class="modal-header">
<h4>对话框</h4>
</div>
<div class="modal-body"><p>对话框内容</p></div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">关闭</button>
<button class="btn btn-primary" data-dismiss="modal">完成</button>
</div>
</div>
</div>
</div>
2.绑定javascript事件
<!-- 触发模态弹出窗元素 -->
<button class="btn btn-primary" type="button">点击我</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
$(function(){
$(".btn").click(function(){
$("#mymodal").modal();
});
});
[布局]bootstrap基本标签总结2的更多相关文章
- [布局] bootstrap基本标签总结
文件头: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl ...
- bootstrap基本标签总结2
[布局]bootstrap基本标签总结2 缩略图 <div class="container"> <div class="row"> ...
- Django 的母板及布局(Bootstrap)
title: Django 的母板及布局(Bootstrap) tags: Django --- Django 的母板及布局(Bootstrap) Django 的母板是作为公共的部分,其他的页面都能 ...
- Android 性能优化 四 布局优化merge标签的使用
小白:之前分享了ViewStub标签的使用,Android还有其他优化布局的方式吗? 小黑:<merge />标签用于减少View树的层次来优化Android的布局.先来用个例子演示一下: ...
- 布局技巧2:合并布局(merge标签)
我们已经有文章向你描述如何使用<include />标签来重用和共享你的布局代码.这篇文章将向你阐述<merge />标签的使用以及如何与<include />标签 ...
- bootstrap基本标签总结[转]
文件头: DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 响应式布局 Bootstrap
github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...
- 响应式布局 Bootstrap(01)
1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...
- bootstrap 下 标签页跳转总结
最近遇到一个问题,是关于bootstrap中的标签页实现上的一些功能实现,现总结一下. 问题描述:点击其他标签页后,如何在点击搜索按钮后自动跳转到第一个标签页.如下图 通过对bootstrap框架里的 ...
随机推荐
- c++ map 插入数据后,begin(),end()以及当前迭代器的变化
1. map.end()指向map的最后一个元素之后的地址,无论执行map.erase(iter)还是map.add(key, value),map.end()所返回的值永远不会发生变化,都是指向同一 ...
- openStack Use Orchestration module(heat) create and manage cloud resources
- adb getprop setprop watchprop用法
在android系统中,有一些初始化的配置文件,例如: /init.rc /default.prop /system/build.prop 文件里面里面配置了开机设置的系统属性值,这些属性值,可以通过 ...
- BaseAdapter的ArrayIndexOutOfBoundsException
最近写一个listView中多个listItem布局时,convertView缓存及使用,类似微信的聊天界面的listView,报了一个异常: 11-25 15:51:49.076: E/InputE ...
- [置顶] vb报表的设计
敲机房收费系统,最难的部分应该就是关于报表的部分了.相对于学生信息管理系统,报表是新内容,在vb中添加报表需要添加第三方控件,首先我们要下载水晶报表,下面就向大家展示一下我设计报表的步骤(我用的新版本 ...
- Android开发之扫描附近wifi热点并列表显示
近期项目中用到了wifi模块.今天做一个简单的总结. 參考:http://www.2cto.com/kf/201310/253617.html 1.如何获取wifi对象并进行操作 要操作WIFI设备, ...
- cocos2dx3.0 超级马里奥开发笔记(两)——正确的规划游戏逻辑
我将不得不拿出一个完整的开发笔记.由于个人原因.代码已OK该,博客,那么就不要粘贴代码,直接解释了整个游戏设计,更确切地说,当新手应该注意的地方发展. 1.继承类和扩展作用的权----展阅读(MVC) ...
- yii [error] [exception.CHttpException.404] exception 'CHttpException' with message 'Unable to resolve the request "favicon.ico".'
yii使用中,发现runtime文件夹下出现这个错误信息 解决办法:在生成的APP程序根目录下建.htaccess文件(前提是需要开启apache重写,具体如何开,查资料咯) 然后配置如下 <I ...
- tortoisegit 保存用户名密码
方法一当你配置好git后,在C:\Documents and Settings\Administrator\ 目录下有一个 .gitconfig 的文件,里面会有你先前配好的name 和email,只 ...
- codevs 3693 数三角形
/* n*m个点中选3个 再排除三点共线 共线分两类 1 在横线或者竖线上 m*C(n,3) n*C(m,3) 2 在对角线上 这个比较麻烦 以为对角线和矩阵是一一对应的 我们转化成求矩阵 并且保证有 ...