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":用于关闭模态框窗口。

上一篇:Bootstrap系列 -- 41. 带表单的导航条


下一篇:搭建门户网站django笔记