2021.7.8今日小结

今天继续学习了Bootstrap 表格

利用table样式类来定义基本表格样式

  table-striped增加一条斑马线条纹。

  table-bordered为表格的每个单元格添加边框。

  table-hover指针悬停在表格的某一行上时会出现浅灰色背景,即对悬停状态给出响应。

Bootstrap为表格提供了五种状态的样式类,通过这些状态类可以改变表格的行或单元格的背景颜色。

  active:表示当前活动信息,应用鼠标悬停背景颜色。

  info:表示普通信息,应用背景为蓝色。

  success:表示一个成功的或积极的动作,应用背景为绿色。

  warning:表示一个需要注意的警告,应用背景为黄色。

  danger:表示一个危险的或潜在的负面动作,应用背景为红色。

按钮

  btn: 为按钮添加基本样式。
  btn-default:默认/标准按钮。
  btn-primary: 原始按钮样式。
  btn-success: 表示成功的动作。
  btn-info: 可用于要弹出信息的按钮。
  btn-warning: 表示需要谨慎操作的按钮。
  btn-danger: 表示-个危险 动作的按钮操作。
  btn-link:让按钮看起来像个链接(仍然保留按钮行为)。
  btn-lg:制作大按钮。
  btn-sm:制作小按钮。
  btn-xs:制作超小按钮。
  btn-block:块级按钮(拉伸至父元素100%的宽度)。
  active:按钮激活状态。当按钮处于激活状态时,将呈现为被按压的外观(深色的背景、深色的边框、阴影)。
  disabled:按钮禁用状态。当按钮处于禁用状态时,颜色会变淡50%,失去按钮行为。

图片

  img-rounded:添加border-radius:6px 来获得圆角图片

  img-circle:添加border-radius:50% 来让整个图形变成圆形

  img-thumbnail:添加一些内边距和灰色的边框

  img-responsive:样式类来让图片支持响应式设计

工具类

  1、情景文本颜色

    <p class="text-info">...</p>

    <p class="text-danger">...</p>

    <p class="text-muted">...</p>

    <p class="text-primary">...</p>

    <p class="text-success">...</p>

    <p class="text-warning">...</p>

  2、情景背景颜色

    <p class="bg-danger">...</p>

    <p class="bg-info">...</p>

    <p class="bg-primary">...</p>

    <p class="bg-success">...</p>

    <p class="bg-warning">...</p>

表单布局

  1、基本表单

    fieldset、legend、label标签

    form-control样式类:显示的宽度会变成100%,并且placeholder属性颜色都设置成#999999.

  2、内联表单

      <body>

        <div class="container">

 

          <form class="form-inline">

            <div class="form-group">

 

              <label class="sr-only">名称</label>

              <input style="width: 200px" class="form-control" type="text" placeholder="请输入用户名">

            </div>

          </form>

        </div>

       </body>

    3、水平表单

      <div class="container">

 

        <form class="form-horizontal" role="form">

          <div class="form-group">

            <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

            <div class="col-sm-10">

              <input type="email" id="inputEmail3" class="form-control" placeholder="请输入你的邮箱地址">

            </div>

          </div>

表单验证样式

  1、颜色提示

    has-warning警告状态,黄色

    has-error错误状态,红色

    has-success成功状态,绿色

  2、图标提示

    has-feedback

    form-control-feedback

  3、文字提示

    在input后面添加一个span标签,即可实现文字提示

输入框组

  1.基本用法
    要在输人框的前面或后面添加内容,首先创建一个带有"input-group" 样式类的<div>容 器,然后在这个<div>容器中把要前置或后置的内容放到"input-                        group-addon"或"input-group-btn"的<span>标签中,再把<span>标签放到<input>元素前面或者后面。

 

上一篇:js里的装饰者模式


下一篇:第九篇 bootstrap实例