Bootstrap学习 - 组件
下拉菜单
注意:需要先引入jQuery.js再引入bootstrap.js(依赖前者)
<div class="dropdown pull-right"> //默认就是dropdown可不写,dropup向上弹出,小三角也会自动变为向上
<button class="dropdown-toggle btn btn-default " type="button" data-toggle="dropdown">
Dropdown<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right"">
<li class="dropdown-header">Language</li>
<li><a role="menuitem">Python</a></li>
<li class="disabled"><a role="menuitem">Java</a></li>
<li><a role="menuitem">PHP</a></li>
<li class="divider"></li>
<li><a>JavaScript</a></li>
</ul>
</div>
按钮组
以CDN的方式引入Bootstrap:<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="btn-group"> //btn-group-vertical 垂直排列 // btn-group-justified 水平铺满容器
<button type="button" class="btn btn-success">按钮1</button>
<button type="button" class="btn btn-primary">按钮2</button>
<button type="button" class="btn btn-danger">按钮3</button>
</div>
效果: 不加btn-group效果: 可以利用这一功能做一些按钮工具栏,像这样的
还可以在btn-group中嵌套下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">3 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a>A</a></li>
<li><a>B</a></li>
</ul>
</div>
</div>
分裂式下拉菜单
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-info">分裂式</button> //就是把普通的下拉菜单和前一个按钮放到一个btn-group里了
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a>A</a></li>
<li><a>B</a></li>
</ul>
<button type="button" class="btn btn-warning">按钮2</button>
<button type="button" class="btn btn-success">按钮3</button>
</div>
</div>
输入框组
<div class="input-group">
<span class="input-group-addon">❤</span> //input-group-btn
<input type="text" class="form-control" placeholder="UserName"/>
</div> 可以在<span>中加入:字符、标签、单复选框、按钮、下拉菜单。。。。。。
<div class="row">
<div class="col-lg-5">
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Button<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
</div>
</div>
</div>
导航栏
实例: <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> //固定在顶端,需要下面页面设置至少50px的padding,否则会挡住。底端也一样
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">❤</a>
</div>
<div class="collapse navbar-collapse">
<ul id="mytab" class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Blog</a></li>
<li ><a href="#">Contact</a></li>
<li ><a href="#">Learning</a></li>
<li ><a href="#">Login</a></li>
</ul> <ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" href="#">A</a></li>
<li role="presentation"><a role="menuitem" href="#">B</a></li>
<li role="presentation"><a role="menuitem" href="#">C</a></li>
<li role="presentation"><a role="menuitem" href="#">D</a></li>
</ul>
</li>
</ul> <form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form> </div>
</div>
</nav> 面包屑导航
<ol class="breadcrumb">
<li><a>Home</a></li>
<li><a>Blog</a></li>
<li><a>Page</a></li>
</ol>
Home / Blog / Page
分页和翻页
<ul class="pagination"> // pagination-lg pagination-sm
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#" >»</a></li>
</ul>
<ul class="pager">
<li><a href="#">Previous</a></li> //居中显示
<li><a href="#">Next</a></li>
</ul> <ul class="pager">
<li class="previous"><a href="#">←向前</a></li> //位于两端 都可以添加.disabled禁止点击
<li class="next"><a href="#">向后→</a></li>
</ul>
标识(标签)
<span class="label label-default">default</span> -primary -info -success -warning -danger
徽章
<a href="#">Messages <span class="badge">3</span></a>
<button type="button" class="btn btn-success" >Messages <span class="badge">100</span></button>
巨幕
<div class="jumbotron">
<h1>Hello world</h1>
<p>hellohellohellohellohellohellohellohellohello</p>
<p><a href="#" class="btn btn-success btn-sm">Go</a></p>
</div>
页头
<div class="page-header">
<h1>Here is the title<small> here is the subtitle</small></h1>
</div>
缩略图
<div class="col-xs-6 col-md-4">
<div class="thumbnail">
<img src="src/img/junjie.jpg" align="junjie" />
<div class="caption"><h3>Junjie</h3></div>
<p>You are so cute!</p>
<a href="#" class="btn btn-info">分享</a>
<a href="#" class="btn btn-success">下载</a>
</div>
</div>
警告框
<div class="alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert" ><span aria-disabled="true" >×</span></button>
<strong>这是一个可以关闭的警告框</strong>
</div>
进度条
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-danger active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:30%;">
30%
</div>
</div>
列表组
<ul class="list-group ">
<li class="list-group-item list-group-item-danger">Python</li>
<li class="list-group-item list-group-item-success">Python</li>
<li class="list-group-item list-group-item-info">Python</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">W3CSchool</h4>
<p class="list-group-item-text">Python PHP HTML CSS JavaScript</p>
</a>
<a href="#" class="list-group-item list-group-item-danger">Python</a>
<a href="#" class="list-group-item list-group-item-success">PHP</a>
<a href="#" class="list-group-item list-group-item-info">JavaScript</a>
</div>
媒体对象
<div class="container">
<div class="media">
<a class="media-left" href="#"> //media-right media-middle media-bottom...
<img src="src/img/junjie.jpg" alt="junjie" height="64px" width="64px">
</a>
<div class="media-body">
<h4 class="media-heading">
Hello Junjie Jun
</h4>
<p>
HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
</p>
</div>
</div>
</div> 还可以这样,只需要添加多个<li>就行
<div class="container">
<ul class="media-list">
<li class="media">
<a class="media-left" href="#"> //media-right media-middle media-bottom...
<img src="src/img/junjie.jpg" alt="junjie" height="64px" width="64px">
</a>
<div class="media-body">
<h4 class="media-heading">
Hello Junjie Jun
</h4>
<p>
HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
</p>
</div>
</li> <li>... </ul>
</div>
面板
<div class="panel panel-success">
<div class="panel-heading">
Here is heading
</div>
<div class="panel-body">
这里可以时普通文本、表格、列表等等
</div>
<div class="panel-footer">
something footer
</div>
</div>
嵌入
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://10.20.62.139"></iframe> //不需要再为iframe设置padding等
</div> <div class="well">
Hello world
</div>
Bootstrap学习 - 组件的更多相关文章
- Bootstrap 学习(1)
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- 详解Bootstrap缩略图组件及警示框组件
缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息.bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合b ...
- python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- 【转载】BootStrap表格组件bootstrap table详解
(转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...
- bootstrap学习大纲
bootstrap 学习分三部分,分别是 css样式,css组件,js插件. 下面介绍三部分分别要学习的内容: 1.css样式:栅格系统,排版,代码,表格,表单,按钮,图片,辅助类,响应式工具. 2. ...
- bootstrap 学习笔记(1)---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
- 前端学习之Bootstrap学习
一,Bootstrap简介 在前端世界,有个叫Bootstrap的家伙,,是twitter 开源出来的一套前端框架,利用Ta可以快速开发网站界面,它的特点就是比自己从头写简单,直观,方便,快捷,省劲. ...
- bootstrap 学习笔记(部分)
这个课程中的boostrap是3.0+版本的.(2.0与3.0有区别) bootstrap中的JS是依赖于jquery的,所以需要事先引用jquery(1.9.0版本以上). <!DOCTYPE ...
随机推荐
- kindeditor编辑器,图片上传功能齐全
废话不多说直接上文件包压缩包:kindeditor图片上传(VS2012)
- Openjudge-计算概论(A)-奇数求和
描述: 计算非负整数 m 到 n(包括m 和 n )之间的所有奇数的和,其中,m 不大于 n,且n 不大于300.例如 m=3, n=12, 其和则为:3+5+7+9+11=35. 输入两个数 m 和 ...
- go语言实现寻找最大子数组
题目:给定一个数字序列,寻找其中各元素相加和最大的子数组 /* 寻找最大子数组go语言实现 */ package main import fmt "fmt" func main() ...
- Javascript:scrollWidth,clientWidth,offsetWidth的区别(转)
网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域高:document.body.offsetW ...
- delete、truncate与drop的区别
转自:SQL truncate .delete与drop区别 相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DD ...
- Slice到C++映射
按:本文是DPWI第6章的笔记. 客户端Slice到C++映射定义的是:怎样把Slice数据类型翻译成C++类型,客户怎样调用操作.传递参数.处理错误.C++映射线程安全,不存在内存管理问题.不建议查 ...
- vim编程配置方法
vim简介Vim 有以下几个模式:1) 正常(normal)模式,缺省的编辑模式:下面如果不加特殊说明,提到的命令都直接在正常模式下输入:任何其它模式中都可以通过键盘上的 Esc 键回到正常模式.2) ...
- javascript 为啥不用instanceof检测数组,这里有一个示例坑
前些天写js遇到了一个instanceof的坑,我们的页面中有一个iframe,我在index页面中计算得到了一个array,然后需要传递到Flight页面 这个嵌套的iframe中的一个函数(Sea ...
- jquery datatable 参数api
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量的演示和详细的文档进行说明 ...
- git 命令参考手册 git中文命令参考手册大全
git init # 初始化本地git仓库(创建新仓库)git config --global user.name "xxx" # 配置用户名git config --global ...