2021.7.9今日小结

今天继续学习了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":用于关闭模态框窗口。