[UI] 05 - Bootstrap: built-in components
前言
一、资源
From: http://www.imooc.com/code/3777
内置组件
一、缩略图
<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 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>
效果图：
二、警示框
<h2>警示框的链接</h2>
<div class="alert alert-success" role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong>
This
<a href="#" class="alert-link">alert needs your attention</a>
, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong>
Better check yourself, you're
<a href="#" class="alert-link">not looking too good</a>
.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong>
<a href="#" class="alert-link">Change a few things up</a>
and try submitting again.
</div>
三、进度条
<h2>带Label的进度条</h2>
<h5>进度条1</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">70%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</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>
- 嵌套布局
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">我是大漠</h4>
<div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">慕课网</h4>
<div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">W3cplus</h4>
<div>W3cplus站上还有很多教程....</div>
</div>
</div>
</div>
</div>
</div>
</div>
五、列表组
详情：http://www.imooc.com/code/3819
<h3>多彩列表组</h3>
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>
六、面板
- 简单面板
<div class="panel panel-danger">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
<div class="panel-footer">作者：大漠</div>
</div>
- 嵌套面板
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">
<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
</p>
<table class="table table-bordered">
<thead>
<tr>
<th>＃</th>
<th>我的书</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>《图解CSS3》</td>
<td>2014-07-10</td>
</tr>
</tbody>
</table>
</div> # 抹掉下面内置table的padding的关键
<div class="panel-footer">作者：大漠</div>
</div>
七、弹出窗口
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>导入JavaScript插件</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal"> # class="modal fade"
<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 --> <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
$(".btn").click( function(){
$("#mymodal").modal("toggle");
});
});
</script>
</body>
</html>
效果图：
其他详见参数设置：http://www.imooc.com/code/3868
<body> <!--data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<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>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
[UI] 05 - Bootstrap: built-in components的更多相关文章
- amaze ui和bootstrap有哪些差别？
amaze ui和bootstrap有哪些差别? 问题 我最近在学amaze ui,感觉如果单从功能性来看和bootstrap最大差别也就是扁平化,不过妹子ui号称对国产本土化支持更好,这个具体表现在 ...
- jQuery UI 之 Bootstrap 快速入门
转载自(http://www.shouce.ren/example/show/s/6444) 1. 下载 这个页面是用来展示 jQuery UI Bootstrap 项目的 -- 我们将 Bootst ...
- Dojo的UI框架bootstrap for dojo和Dojo-Bootstrap简介
最近在学习Dojo,但样式问题真是头疼呀,虽然清新的淡蓝色很是减缓眼睛的疲劳,但这个扁平化简约风盛行的年代,光是清新的拟物已经满足不了群众的需求了,所以就在这样的需求下,我知道了bootstrap f ...
- [UI] 03 - Bootstrap: component
前言 一.框架体系 Bootstrap 是基于 HTML5.CSS3.JAVASCRIPT. 教程被分为: Bootstrap 基本结构. Bootstrap CSS. Bootstrap 布局组件 ...
- 【Bootstrap基础学习】05 Bootstrap学习总结
好吧,Copy了几天,这个总结算是把我对Bootstrap的一些理解写一下吧. Bootstrap只是一套别人写好的前端框架,直接拿来用就好. 不过对于专业的前端而言,如果不去把所有的代码都看一遍来理 ...
- [UI] 04 - Bootstrap: layout & navigation
前言 一.资源 From: http://www.imooc.com/code/2881 Ref: http://www.runoob.com/try/bootstrap/layoutit/[拖拽布局 ...
- [Code::Blocks] Install wxWidgets & openCV
The open source, cross platform, free C++ IDE. Code::Blocks is a free C++ IDE built to meet the most ...
- 本人SW知识体系导航 - Programming menu
将感悟心得记于此,重启程序员模式. js, py, c++, java, php 融汇之全栈系列 [Full-stack] 快速上手开发 - React [Full-stack] 状态管理技巧 - R ...
- [Full-stack] 网页布局艺术 - Less
故事背景 一个过程: template/html ----> css ----> less ----> bootstrap/flex ----> Semantic-ui fle ...
随机推荐
- float类型数保留一位小数
float类型数保留一位小数 float a = 2.5f; float b = 1.2f; System.out.println(a/b); System.out.println((float)(M ...
- __Linux__文件和目录
Linux 目录 /:根目录,一般根目录下只存放目录,在Linux下有且只有一个根目录.所有的东西都是从这里开始.当你在终端里输入“/home”,你其实是在告诉电脑,先从/(根目录)开始,再进入到ho ...
- 中文分词组件：thulac及jieba试用手记
一.THULAC THULAC由<清华大学自然语言处理与社会人文计算实验室>研制推出的一套中文词法分析工具包.官网地址:http://thulac.thunlp.org,该项目提供了多种语 ...
- Using a Virtex Device to Drive 5V CMOS-Level Signals
Must tri-state outputs and use an external resistor to pull up to 5V To drive 5V CMOS-level inputs, ...
- [转]delphi 有授权许可的字符串拷贝函数源码
一段看上去“貌不惊人”的Delphi插入汇编代码,却需要授权许可,但是与经典的同类型函数比较,确实“身手不凡”. 研究代码的目的在于借鉴,本文通过分析,并用C++重写代码进行比较,再次证明这段代码效率 ...
- boost.xml_parser中文字符问题 (转)
当使用xml_parser进行读xml时,如果遇到中文字符会出现解析错误. 网上有解决方案说使用wptree来实现,但当使用wptree来写xml时也会出错.而使用ptree来写中文时不会出错. 综合 ...
- Android上实现各种风格的隐藏菜单,比如左右滑动菜单、上下滑动显示隐藏菜单
Android上的菜单展示风格目前是各式各样的,但用的最多且体验最好的莫过于左右滑动来显示隐藏的菜单本示例实现了各种方式的菜单展示效果,只有你想不到的源码:https://github.com/Sim ...
- sublime text3怎么安装Package Control
sublime text3地址:https://packagecontrol.io/installation#st3 1.打开Preferences——Browse Packages,打开一个文件夹C ...
- <转>详解C++的模板中typename关键字的用法
用处1, 用在模板定义里, 标明其后的模板参数是类型参数. 例如: template<typename T, typename Y> T foo(const T& t, const ...
- 我的Nginx配置文件
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...