标签：模态 2021.7 样式 小结 label navbar 添加 今日 导航
今天继续学习了Bootstrap表单与组件的应用。
导航栏
1、默认样式导航栏
向<nav>标签添加navbar和navbar-default样式类。添加role=“navigation”有助于增加可访问性。向<div>元素添加标题navbar-header样式类。
为导航栏添加链接的话，只需要添加nav和navbar-nav样式类的无序列表即可。
2、导航栏中的表单
为<form>元素添加navbar-from样式类，以确保表单适当的垂直对齐，并且在较窄的视口中可以折叠。
3、导航栏中的按钮与文字
在<p>标签中使用navbar-text,设置适当的前导和颜色。
在<button>标签在使用navbar-btn使按钮在导航栏上面垂直居中。
4、结合图标的导航链接
<span class="glyphicon glyphicon-log-in"></span>设置图标
5、对齐方式
navbar-left navbar-right
6、导航栏定位
navbar-fixed-top固定页面顶部 navbar-fixed-bottom固定在页面底部 navbar-static-top跟着页面一起滚动
7、反色导航栏
navbar-inverse 创建一个黑色背景白色文本的反色导航栏。
导航元素
通过<ul>标记中添加nav样式，在此类基础上添加nav-tables和nav-pills来改变导航栏样式
其他导航
1、响应式导航
(1)将导航栏中所有要被折叠的内容由一个<div>元素包裹，并且给这个<div>元素添加 “collapse"和“navbar-collapse" 样式类，然后给这个<div>元素添加一个class或ID值。
(2)在导航栏标题内添加一个按钮<button>元素，用于触发菜单项的显示与隐藏。给这个 按钮应用data-target=".. "属性，属性值对应上面<div>元素的class或ID值。
2、路径导航
路径导航也称为面包屑导航，是一种基于网站层次信息的显示方式。路径导航可以显示发布日期、类别或标签，用来表示当前页面在导航层次结构内的位置，路径导航是创建 一个带有“breadcrumb”样式类的无序列表。
3、分页导航
在无序列表<ul>上添加pagination样式类。 翻页是pager样式类。
CSS组件 标签与徽章
<span Class="label label-default">默认标签祥式</span>
Botstrap具有多种颜色标签，用于表达不同的页面信息，其说明如下所示: label label-default: 默认的灰色标签。
label label-primary:重要，其内容用深蓝色显示，提示用户注意阅读。
label label-success:成功，其内容用亮绿色显示，表示成功或积极的动作。
label label-info:信息，其内容用浅蓝色显示。
label label-warning:警告，其内容用黄色显示，提醒用户应该谨慎操作。
label label-danger:危险，其内容用红色显示，提醒用户危险的操作信息。
其使用格式如下所示:
<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</spao>
<span class="label label-warning">warning</ span>
<span class="label label-danger">danger</ span>
微章与标签相似，主要区别在于微章的边角更加圆滑。徽章主要用于突出显示新的或未读的项。 如果需要使用微章，只需要把<span class="badge"添加到链接。
<a href='"#”>Mailbox<span class="badge" >50</span></a>
巨幕与页头
可以在所有的container样式类外使用jumbotron样式类
缩略图
在图像周围添加带有thumbnail类的<a>标签
警告与进度条
alert-success(成功) alert-info(信息) alert-warning(警告) alert-danger(危险) alert-dismissable(添加一个关闭按钮)
进度条progress-bar样式类 aria-valuenow(合适) aria-valuemin(最小) aria-valuemax(最大) style="width:40%"
面板
panel样式类 panel-heading头部 panel-body内容 panel-footer尾部
Bootstrap插件
模态框
(1) modal:是把<div>的内容设置为模态框最外层容器的样式类。
(2) modal-dialog:是把<div>的内容设置为模态框第二层容器的样式类。
(3) modal-content:是把<div>的内容设置为模态框第三层容器的样式类。
其中:modal-header:是把<div>设置为模态框窗口头部的样式类。
modal-body:是把<div>设置为模态框窗口主体内容的样式类。
modal-footer:是把<div>设置为模态框窗口底部的样式类。
(4) aria-hidden="true":用于保持模态框窗口不可见，直到触发器被触发为止(例如单击相关的触发按钮)。
(5) class="close":用于设置模态框窗口关闭按钮的样式类。
(6) data-dismiss="modal":用于关闭模态框窗口。
标签：模态,2021.7,样式,小结,label,navbar,添加,今日,导航 来源： https://www.cnblogs.com/Privatexaio/p/14992055.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。