标签：navbar bootstrap 笔记 添加 按钮 导航 class
bootstrap layout
Bootstrap Glyphicons bootstrap字体图标
1.definition：·字体图标是在web项目中使用的图标字体
2.css规则解释
3.syntax：
<span class="glyphicon glyphicon-search"></span>
4.定制字体图标
example：
<button tvpe="button" class="btn btn-primary btn-1g"> <span class="gyphicon glyphicon-user"></span> User </button>
定制字体尺寸：font-size
定制字体颜色：color
应用文本阴影：text-shadow
Bootstrap Dropdowns bootstrap 下拉菜单
1.definition:下拉菜单，以列表格式显示链接的上下文菜单。
2.example：
<!DOCTYPE html> <html> <head> <title>Bootstrap实例-下拉菜单(Dropdowns) </title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/iquery.min.is"></script> <script src="/bootstrap/is/bootstrap.min.js"></script> </head> <body> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"data-toggle="dropdown">主题<span class="caret">s/span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Javak</a></1i> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">数据挖掘</a></1i> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">数据通信/网络</a></li> <li role="presentation" class="divider"></1i> <1i role="presentation"><a role="menuitem" tabindex="-1" href="#">分离的链接</a></1i> </ul> </div> </body> </html>
3.样式
对齐：
向右对齐 .pull-right添加在dropdown-menu class 类
<ul class="dropdown-menu pull-right" role= "menu">
标题：
dropdown-header向下拉菜单的标签区域添加标题
<li role="presentation" class="dropdown-header">
bootstrap button bootstrap 按钮组
1.按钮组允许讲多个按钮堆叠在同一行上
2.一些主要的class
![]()
![]()
3.按钮组
1）基本的按钮组
<div class="btn-group"> <button type="button" class="btn btn-default">按钮1 </button> <button type="button" class="btn btn-default">按钮2</button> <button type="button" class="btn btn-default">按钮3 </button> </div>
2）按钮工具栏：获得更复杂的组件
<div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">按钮1 </button> <button type="button" class="btn btn-default">按钮2</button> <button type="button" class="btn btn-default">按钮3 </button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">按钮1 </button> <button type="button" class="btn btn-default">按钮2</button> <button type="button" class="btn btn-default">按钮3 </button> </div> </div>
3)按钮的大小 btn-group-*
4)按钮的嵌套 btn-group 嵌套一个btn-group
5)垂直的按钮 btn-group-vertical
<div class="btn-group-vertical"> <button type="button" class="btn btn-default">按钮1</button> <button type="button" class="btn btn-default">按钮2</button> </div>
6)bootstrap 按钮下拉菜单
在一个.btn-group中放置按钮和下拉菜单
基本的——
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 默认<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div>
分割的——
<div class="btn-group"> <button type="button" class="btn btn-default">默认</button> <button type="button" class="btn btn=default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">切换下拉菜单</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div>
7)按钮下拉菜单的大小
.btn-large .btn-sm或者.btn-xs
8)按钮上拉菜单
向.btn-group容器添加.dropup即可
bootstrap input bootstrap 输入框组
note:避免使用<select>元素；不要向表单组应用输入框组的class，输入框组是一个孤立的组件
1）基本的输入框组
<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control placeholder="twittorhandle"> </div>
<span>和<input>元素放置的次序影响排版
2）输入框的大小
向,input-group添加相对与表单大小的class(input-group-lg input--group-sm input-group-xs)
3)单选框和复选插件（将其作为输入框组的前缀或者后缀元素）
<div class="input-group"> <span class="input-group-addon"> <input type="checkbox|radio"> </span> <input type="text" class="form-control"> </div>
4)按钮插件（同上）
note：不能用input-group-addon,而要使用input-group-btn
基本——
<div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go! </span> <input type="text" class="form-control"> </div>
带有下拉菜单的——
<div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 默认<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> <input type="text" class="form-control"> </div> </div>
分割的——
（参照其上）
Bootstrap Navigation Element bootstrap 导航元素
1.table navigation or labels 表格导航或标签
创建一个标签式的导航菜单:
以一个带有class .nav的无序列表开始
添加class .nav-tabs
<ul class="nav nav-tabs"> <li class="active"><a href="#">home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> </ul>
2.capsule navigation menu 胶囊式的导航菜单
1）基本的导航式菜单
将nav-tabs改为nav-pills即可
example：文件中
<ul class="nav nav-pills"> <li class="active"><a href="#">home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> </ul>
2)垂直的胶囊式导航菜单
在使用nav-pills的同时加上 .nav-stacked 即可
<ul class="nav nav-pills nav-stacked">
3）两端对齐的导航
在屏幕宽度大于768px时，通过分别使用.nav, .nav-tabs或.nav, .nav-pills的同时,使用class.nav-justified,让标签式或胶囊式导航菜单与父元素等宽。
<ul class="nav nav-pills/nav-tabs nav-justified"> <li class="active"><a href="#">home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> </ul>
4)diabled links禁用链接
每个.nav class,如果添加 disabled class,则会创建一个灰色的链接,同时禁用了该链接的:hover状态
<li class="disabled"><a href="#">V(禁用链接</a></li>
3.Drop-down menu 下拉菜单
创建有下拉菜单的标签
以一个带有class.nav的无序列表开始
添加class.nav-tabs.
添加带有.dropdown-menu class的无序列表
<ul class="nav nav-tabs|nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> <li class="dropdown"> <a class="dropdown-toggle " data-toggle="dropdown" href="#">java<span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#" >Swing</a></li> <li><a href="#" >JMeter</a></li> <li><a href="#" >EJB</a></li> <li class="divider"></li> <li><a href="#" >分离的链接</a></li> </ul> </li> </div>
bootstrap Navigation Bar bootstrap 导航栏
1.默认的导航栏
创建一个默认的导航栏：
向<nav>标签添加class.navbar, .navbar-default
向上面的元素添加role="navigation",有助于增加可访问性
向<div>元素添加一个标题class .navbar-header,内部包含带有class navbar-brand的<a>元素。这会让文本看起来更大一号。
为了向导航栏添加链援,只需要简单地添加带有class navbar-nav的无序列表即可
<nav class="navbar navbsr-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <ul class=“nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> <li class="dropdown"> <a class="dropdown-toggle " data-toggle="dropdown" href="#">java<span class="caret"> </span> </a> <ul class="dropdown-menu"> <li><a href="#" >Swing</a></li> <li><a href="#" >JMeter</a></li> <li><a href="#" >EJB</a></li> <li class="divider"></li> <li><a href="#" >分离的链接</a></li> </ul> </li> </div>
2）响应式的导航栏
使用bootstrap折叠插件（collapse）
折叠起来的导航栏实际上一个带有class .navbar-toggle和两个data-元素的按钮
3）导航栏中的表单
导航栏中的表单时使用.navbar-form class
4）导航栏中的按钮
可以使用class .navbar-btn 向不在form中的<button>元素添加按钮，按钮在导航栏上垂直居中，navbar-btn可以用在<a>和<input>元素上
note：不要在.navbar-nav内的<a>上使用.navbar-btn
5)导航栏中的文本
使用class .navbar-text
6)非导航链接
class .navbar-link为默认的和倒装的导航栏添加适当的颜色
7）组件对齐方式
对齐：class .navbar-right .navbar-left
8)固定到顶部与底部
bootstrap导航栏可以动态定位，默认情况下，它是块级元素，基于在html中放置的位置定位的。
固定到顶部：向.navbar class 添加 class navbar-fixed-top
note:防止导航栏与页面主体中的其他内容的顶部相交错，向<body> tag 添加至少50像素的内边距
固定到底部：向.navbar class 添加 class navbar-fixed-buttom
8)静态的顶部
能随着页面一起滚动的导航栏，添加.navbar-static-top
(不要求向<body>添加内边距）
9）倒置的导航栏
创建一个带有黑色背景白色文本的倒置的导航栏：向.navbar class 添加.navbar-inverse class
note:防止导航栏与页面主体中的其他内容的顶部相交错，向<body> tag 添加至少50像素的内边距
5.bootstrap breadcrumbs面包屑导航
面包屑导航时一种基于网站层次信息的显示方式。表示当前页面在层次结构中的位置
bootstrap 中的面包屑导航时一个简单的带有.breadcrumb class的无序列表
bootstrap paging bootstrap分页
分页（pagination）：是一种无序列表
处理分页的class
![]()
![]()
1）默认的分页
class .pagination
2)分页的状态
class .disabled ; .active
3)分页的大小
class .pagination-*
.pagination-lg;.pagination.sm
4）翻页（pager）
翻页：创建一个简单的分页链接为用户提供导航
![]()
默认的翻页：pager
对齐的链接：class .previous .next的用法
翻页的状态： class .disabled
bootstrap label bootstrap 标签
标签：可以用于计数、提示或者页面上其他的标记。 class .label：显示标签
改变标签的外观：class label-default label-primary label-success label-info label-warning label-danger
bootstrap badges bootstrap 徽章
1）bootstrap会长和标签相似，主要区别在于徽章的边角更加圆滑
徽章主要用于突出显示新的或未读的项，使用徽章：class=“badge”
2）激活导航状态
可以在激活状态的胶囊式导航和列表导航中放置徽章，使用<span class="badge">来激活链接
bootstrap jumbotron bootstrap 超大屏幕
1）使用超大屏幕的步骤
创建一个带有class jumbotron.的容器<div>
除了更大的<h1>,字体粗细font-weight被减为200px
2)获得占用全部宽度且不带圆角的超大屏幕：在所有.container class 外使用 jumbtron class
bootstrap page header bootstrap 页面标题（页眉）
页面标题功能：在网页标题四周添加适当的间距
使用:将 class .page-header 放在<div>中
bootstrap 缩略图
1）使用缩略图的步骤
在图像周围添加带有class .thumbnail的标签。
这会添加四个像素的内边距(padding)和一个灰色的边框。
当鼠标悬停在图像上时,会动画显示出图像的轮廓。
2）添加自定义内容
可以向缩略图中添加各种HTML内容，比如标题、段落和按钮
步骤：
把带有class .thumbnail的<a>标签改为<div>
在该<div>中，可以添加任何你想要添加的东西
如果要对图像进行分组，放置在一个无序列表中，且每一个列表项向左浮动
bootstrap alerts bootstrap 警告
1）警告向用户提供了一种定义消息样式的方式，他们为典型的用户操作提供了上下文反馈
2）创建一个内联的可取消的警告框：Alert jQuery插件
3）添加一个基本的警告框：向一个<div>中添加 .alert class和四个上下文 class (.alert-success .alert-info .alert-warning .alert-danger)之一
4）可取消的警告：
向一个<div>中添加 .alert class和四个上下文 class (.alert-success .alert-info .alert-warning .alert-danger)之一来完成一个基本的警告框
同时向上面的<div> class添加可选的.alert-dismissable.
添加一个关闭按钮
important code:
<button type="button"class="close" date-dismiss="alert" aria-hidden="true"> × </button>
note:请确保使用带有 data-diasmiss="alert" data 属性的<button>元素
5)警告中的链接
步骤：
向一个<div>中添加 .alert class和四个上下文 class (.alert-success .alert-info .alert-warning .alert-danger)之一来完成一个基本的警告框
使用 .alert-link实体类来快速提供带有匹配颜色的链接
bootstrap progress bar bootstrap进度条
1）默认的进度条
创建一个基本进度条的步骤：
添加一个带有class.progress的<div>
在<div>内添加一个带有class.progress-bar的空的<div>
添加一个带有百分比表示的宽度的style属性
2)交替的进度条
创建一个交替的进度条：
添加一个带有class.progress的<div>
在<div>内添加一个带有class.progress-bar和progress-bar-*(*可以是success ,info,warning,danger)的<div>
添加一个带有百分比表示的宽度的style属性
3)条纹的进度条
创建一个条纹的进度条：
添加一个带有class.progress和.progress.striped的<div>
在<div>内添加一个带有class.progress-bar和progress-bar-*(*可以是success ,info,warning,danger)的<div>
添加一个带有百分比表示的宽度的style属性
4)动画的进度条
创建一个动画的进度条：
添加一个带有class.progress和.progress-striped 的<div>,同时添加class.active
在<div>内添加一个带有class.progress-bar和progress-bar-*(*可以是success ,info,warning,danger)的<div>
添加一个带有百分比表示的宽度的style属性
5)堆叠的进度条
将多个进度条放在相同的.progress中即可实现堆叠
bootstrap media object bootstrap 多媒体对象
1）两种形式来设置多媒体对象
.media:允许将多媒体对象里的多媒体（图像、音频、视频）浮动到内容区块的左边或者右边
.media-list：可用于评论列表与文章列表
bootstrap list Group bootstrap列表组
1)创建一个基本的列表组
向元素<ul>添加class .list-group
向<li>添加 class .list-group-item
2)向列表组添加徽章
在<li>元素中加入<span class="badge">
3)向列表组添加链接
4)向列表组添加自定义内容
bootstrap panels bootstrap 面板
面板足迹用于讲DOM组件插入到一个盒子里
1）创建一个基本的面板
向<div>元素中添加class.panel和class.panel-default即可
2)添加面板标题
使用.panel-heading class
使用带有.panel-title class的<h1>-<h6>添加预定义样式的标签
3）面板脚注
把按钮或者附文本放在class.panel-footer的<div>中即可
4）带语境色彩的面板
语境状态类：panel-primary panel-successs panel-info panel-warning panel-danger
5）带有表格的面板
创建一个无边框的表格：class.table
有一个包含.panel-body的<div>，向变革的顶部添加额外的边框用来分割
若无，组件会无中断地从面板头部移动到表格
6）带有列表组的面板
bootstrap well
well是一种会引起内容凹陷显示或插图效果的容器<div>
直接将内容放在class well的<div>中即可
1）修改尺寸大小：well-lg well-sm
标签：navbar,bootstrap,笔记,添加,按钮,导航,class
来源： https://www.cnblogs.com/star-bloom-blog/p/14752998.html
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
