Bootstrap学习笔记之组件（二）
来源：互联网 发布：淘宝多久可以追加评论 编辑：程序博客网 时间：2024/05/24 01:05
组件一、Glyphicons 字体图标 务必在图标和文本之间添加一个空格 <span class="glyphicon glyphicon-search"></span> 搜索 二、下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown<span class="caret"></span> </button> <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li><a href="#">Separated link</a></li> </ul></div> 标题 <li class="dropdown-header">header</li> 分割线 <li class="divider">divider</li> 禁用 <li class="disabled"><a href="#">Something else here</a></li> 三、按钮组 基本 .btn-group > .btn <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> 多个按钮组组成工具栏，之间隔以小空格 .btn-toolbar > .btn-group > .btn <div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> <div class="btn-group">...</div> </div> 尺寸 <div class="btn-group btn-group-lg">...</div> <div class="btn-group">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</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"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> 垂直排列 <div class="btn-group-vertical"> ... </div> 两端对齐，占满父元素宽度 注意：必须将每个按钮包裹进一个按钮组中 <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Middle</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Right</button> </div> </div>四、按钮式下拉菜单 单按钮下拉菜单 文字与下拉箭头在一起 <!-- Single button --><div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li> </ul></div> 分裂式按钮下拉菜单 文字与下拉箭头间隔以一条竖线 <!-- Split button --><div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li> </ul></div> 向上弹出式菜单 给父元素添加 .dropup 类 <div class="btn-group dropup"> ... </div> 五、输入框组 在文本输入框 <input> 两边加上文字或按钮 注意：只支持文本输入框 <input> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> 作为额外元素的多选框和单选框 <div class="input-group"> <span class="input-group-addon"> //此时是.input-group-addon <input type="checkbox"> //将文字换成checkbox或radio </span> <input type="text" class="form-control"> </div> 作为额外元素的按钮 <div class="input-group"> <span class="input-group-btn"> //注意此时是.input-group-btn <button class="btn btn-default" type="button">Go!</button> //此处换成button </span> <input type="text" class="form-control"> </div> 作为额外元素的(分裂式)按钮下拉菜单 <div class="input-group"> <div class="input-group-btn"> //发现按钮统一为.input-group-btn，可换div包裹 <!-- Button and dropdown menu --> </div> <input type="text" class="form-control"> </div>六、导航 标签页 注意 .nav-tabs 类依赖 .nav 基类。 <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> 胶囊式标签页 垂直方向堆叠排列，添加 .nav-stacked 类 <ul class="nav nav-pills nav-stacked" role="tablist"> ... </ul> 两端对齐的标签页，占满父元素宽度 <ul class="nav nav-pills nav-justified" role="tablist"> ... </ul> 禁用的链接 给禁用的项添加.disabled <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> 带下拉菜单的(胶囊式)标签页 <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> ... </ul> </li>七、导航条 <nav class="navbar navbar-default" role="navigation"> //为了增强可访问性，务必给每个导航条加上 role="navigation" 属性。 <div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"> //button为移动端（窄屏）右边出现的按钮 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span> //按钮上横杠数（3条）<span class="icon-bar"></span><span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> //可将a标签内容替换为<img alt="Brand" src="...">，以图片代之</div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> //导航栏<li class="active"><a href="#">Link</a></li><li><a href="#">Link</a></li><li class="dropdown"> //带下拉菜单的导航项 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> //下拉项<li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li><li class="divider"></li><li><a href="#">One more separated link</a></li> </ul></li> </ul> <form class="navbar-form navbar-left" role="search"> //检索表单项<div class="form-group"> <input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> //靠右的导航栏<li><a href="#">Link</a></li><li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li> </ul></li> </ul></div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav> 表单 为输入框添加 label 标签，否则屏幕阅读器将会遇到问题，可添加类sr-only隐藏label内容 按钮 对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。 <button type="button" class="btn btn-default navbar-btn">Sign in</button> 非导航的链接 <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> //.navbar-text保证有正确的行距和颜色 .navbar-right靠右排列 .navbar-link让链接有正确的默认颜色和反色设置 固定在顶部 .navbar-fixed-top 注意：此时导航条会遮住页面上部分内容（导航条默认高度为50px），需要设置 body { padding-top: 70px; } <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> ... </nav> 固定在底部 .navbar-fixed-bottom 注意：此时导航条会遮住页面上部分内容（导航条默认高度为50px），需要设置 body { padding-bottom: 70px; } 静止在顶部 <nav class="navbar navbar-default navbar-static-top" role="navigation"> //推荐这种方法，不用设置内边距，注意此时.navbar-collapse左右padding为0，默认的为15px，即如果有靠右的导航栏项目，则顶边 <div class="container"> ... </div> </nav> 反色的导航条，即黑色，默认是白色 .navbar-inverse <nav class="navbar navbar-inverse" role="navigation"> ... </nav>八、路径导航 .breadcrumb 各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。 <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> 九、分页 <nav> <ul class="pagination"> <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="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </nav> 可以将 active 或 disabled 状态应用于 <span> 标签，即替换 <a> 标签，这样就可以让其保持需要的样式并移除点击功能 <nav> <ul class="pagination"> <li class="disabled"><span>«</span></li> <li class="active"><span>1 <span class="sr-only">(current)</span></span></li> ... </ul> </nav> 尺寸 <nav><ul class="pagination pagination-lg">...</ul></nav> //large <nav><ul class="pagination">...</ul></nav> //default <nav><ul class="pagination pagination-sm">...</ul></nav> //small 翻页，以两个按钮来实现上一页&下一页功能 <nav> <ul class="pager"> //默认两个按钮是居中对齐 <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </nav> <nav> <ul class="pager"> //两端对齐 <li class="previous"><a href="#">← Older</a></li> //左浮动 <li class="next"><a href="#">Newer →</a></li> //右浮动 </ul> </nav>十、标签 <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>十一、徽章 可以很醒目的展示新的或未读的信息条目。 <a href="#">Inbox <span class="badge">42</span></a> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button> 十二、巨幕 <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> 十三、页头 .page-header <div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div> 十四、缩略图 结合栅格系统控制宽度，展示带链接的图片 <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> //.thumbnail <img data-src="holder.js/100%x180" alt="..."> </a> </div> ... </div> 可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内。 <div class="row"> <div class="col-xs-6 col-md-3"><div class="thumbnail"> <a href="#"> <img src="bootstrap/img/glyphicons-halflings.png" alt="..."> </a> <div class="caption"> //自定义部分.caption<h3>Thumbnail label</h3><p>...</p><p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div></div> </div></div> 十五、警告框 <div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div> 可关闭的警告框 <div class="alert alert-warning alert-dismissible" role="alert"> //需添加.alert-dismissible <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> //参考辅助类中关闭按钮，注意button添加data-dismiss="alert"以保证所有设备上的行为正确 <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> 警告框中的链接 .alert-link <div class="alert alert-success" role="alert"> <a href="#" class="alert-link">...</a> </div> 十六、进度条 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div> 进度数值较低时： 建议为进度标签添加一个 min-width: 20px; 属性。 多种颜色 默认深蓝色，.progress-bar-success 绿 .progress-bar-info 浅蓝 .progress-bar-warning 黄 .progress-bar-danger 红 条纹效果 .progress-bar-striped 动画效果 .progress-bar-striped & .active 堆叠效果 多个.progress-bar置于同一个.progress中 <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div> </div>十七、媒体对象 允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）（就像博客评论或 Twitter 消息等）。 <div class="media"> //媒体对象 <a class="media-left media-middle" href="#"> //左边的多媒体 位置.media-middle .media-bottom <img src="..." alt="..."> </a> <div class="media-body"> //右边的内容 <h4 class="media-heading">Media heading</h4> ... </div> </div> 媒体对象列表 <ul class="media-list"> <li class="media"> <a class="media-left" href="#"> <img src="..." alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> ... </div> </li> </ul>十八、列表组 <ul class="list-group"> <li class="list-group-item"><span class="badge">14</span>Cras justo odio</li> //徽章排版时自动置于右边 <li class="list-group-item"><span class="badge">14</span>Dapibus ac facilisis in</li> <li class="list-group-item"><span class="badge">14</span>Morbi leo risus</li> <li class="list-group-item"><span class="badge">14</span>Porta ac consectetur ac</li> <li class="list-group-item"><span class="badge">14</span>Vestibulum at eros</li> </ul> 链接 <div class="list-group"> <a href="#" class="list-group-item active"> Cras justo odio </a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </div> 情境类 .list-group-item-success .list-group-item-info .list-group-item-warning .list-group-item-danger 定制内容 列表组中的每个元素都可以是任何 HTML 内容 <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">...</p> </a> </div>十九、面板 <div class="panel panel-info"> //.panel-info .etc可带有情景效果 <div class="panel-heading">Panel heading without title</div> //.panel-heading 标题 <div class="panel-body">Panel content </div> <div class="panel-footer">Panel footer</div> //.panel-footer 脚注，不会从情景中继承颜色效果</div> 二十、Well 把 Well 用在元素上，能有嵌入（inset）的的简单效果。 <div class="well">...</div> <div class="well well-lg">...</div> <div class="well well-sm">...</div> 0 0
- Bootstrap学习笔记之组件（二）
- Bootstrap学习总结笔记（10）-- 基本组件之导航
- Bootstrap学习总结笔记（12）-- 基本组件之分页
- Bootstrap学习总结笔记（13）-- 基本组件之缩略图
- Bootstrap学习总结笔记（14）-- 基本组件之面板
- Bootstrap学习总结笔记（15）-- 基本组件之进度条
- bootstrap v3学习笔记之组件
- bootstrap 学习笔记（二）
- Bootstrap学习笔记（二）
- Bootstrap 学习笔记(二）
- Bootstrap学习笔记（二）
- Bootstrap学习（二）——Bootstrap 布局组件
- Bootstrap快速学习笔记（1）排版系列之二
- Bootstrap快速学习笔记（2）表单系列之二
- （学习笔记）Bootstrap基础--Web组件
- Bootstrap组件学习笔记（二）——按钮组和输入框组
- bootstrap学习笔记二
- BootStrap学习笔记二
- android-strings-search-plugin
- struts2 图片上传至服务器 页面预览及页面及时图片预览功能实现方式
- spring boot shiro 权限验证注解报异常不跳转403
- hdu 5980
- myeclipse导出war包时报错java.lang.NullPointerException
- Bootstrap学习笔记之组件（二）
- 有用网址
- 37.38.39收货地址的建立，以及退出登录功能
- 人脸对齐 资料
- 曾国藩：盖士人读书，第一要有志，第二要有识，第三要有恒
- caffe+VS2013+Windows无GPU快速配置教程
- Android 图片压缩终极解决方案，仅需一行代码。
- Fiddler抓取接口
- Docker入门概览
