学习boot笔记

Posted 2020-09-25

响应式导航栏
1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
2、保证在窄屏时要显示的图标样式（固定写法）：
< button class="navbar-toggle" type="button" data-toggle="collapse"  data-target="#example">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
< /button>
    3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。如需要折叠的div代码段：
< div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
< /div>
    窄屏时显示的图标代码段：
< button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
< /button>

反色导航条
navbar-default类名换成navbar-inverse
分页导航条
Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入类名pagination的方法 。通过“pagination-lg”让分页导航变大；通过“pagination-sm”让分页导航变小：
翻页导航
    分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。ul中加入pager类。li中previous：让“上一步”按钮居左  next：让“下一步”按钮居右

标签label样式也提供了多种颜色：
  ?   label-deafult:默认标签，深灰色
  ?   label-primary：主要标签，深蓝色
  ?   label-success：成功标签，绿色
  ?   label-info：信息标签，浅蓝色
  ?   label-warning：警告标签，橙色
  ?   label-danger：错误标签，红色
徽章：
   像标签一样，使用span标签来制作，然后为他加入badge类：
缩略图
   通过“thumbnail”样式配合bootstrap的网格系统来实现。
   还可以让缩略图配合标题、描述内容，按钮等。缩略图下方div采用caption类
警示框
alert类名：再加上alert-success  alert-info  alert-warning  alert-danger代表不同的警示效果
alert-dismissable 代表警示框可以关闭。在button标签中加入class="close"类，实现警示框关闭按钮的样式。
< div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">×</button>
    恭喜您操作成功！
< /div>
alert-link 警示框链接 <a>标签中
进度条
    两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。设置自容器的style=“width=*%”即可。
    progress-bar-info：表示信息进度条，进度条颜色为蓝色
  ? progress-bar-success：表示成功进度条，进度条颜色为绿色
  ? progress-bar-warning：表示警告进度条，进度条颜色为黄色
  ? progress-bar-danger：表示错误进度条，进度条颜色为红色
    条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”
    动态进度条在进度条“progress progress-striped”两个类的基础上再加入“active”类名就能让进度条动起来。
    层叠进度条：多个子容器且和不超过100% progress-bar-striped设置单个子容器是否有条纹
      带Label的进度条：只需要在进度条中添加你需要的值eg：20%
媒体对象：
    媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
       媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
       媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
       媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选。
常常使用“pull-left”。“pull-right”来控制媒体对象中的对象浮动方式。
嵌套媒体对象
媒体对象列表： ul/li
   ul的类名写为：media-list
   li是一个个单独的media
列表组(active和disabled代表状态)
基础列表组主要包括两个部分：
  ?  list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素
  ?  list-group-item：列表项，常用的是li元素，当然也可以是div元素
带徽章的列表组
   徽章组件和基础列表组结合在一起。需要在“list-group-item”中添加徽章组件“badge”。
带链接的列表组
   .1 在“list-group-item”中添加链接a标签
      不足之处，就是链接的点击区域只在文本上有效.希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式：“display:block”；
   .2 将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换
     Bootstrap框加在链接列表组的基础上新增了两个样式（a标签中）：
        ?  list-group-item-heading：用来定义列表项头部样式
        ?  list-group-item-text：用来定义列表项主要内容
列表项li或a中
  ?  list-group-item-success：成功，背景色绿色
  ?  list-group-item-info：信息，背景色蓝色
  ?  list-group-item-warning：警告，背景色为黄色
  ?  list-group-item-danger：错误，背景色为红色
面板  
      div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”。panel-primary：重点蓝    panel-success：成功绿
  panel-info:信息蓝   panel-warning：警告黄   panel-danger：危险红
      另外在里面添加了一个“div.panel-body”来放置面板主体内容。 panel-heading：用来设置面板头部样式。panel-footer：用来设置面板尾部样式
    面板中嵌套表格：在panel-body中添加表格的写法
      面板中嵌套列表组：在panel-body中添加列表组的写法