653 Bootstrap_全局cSS样式_按钮&图片 amd 654 Bootstrap_全局cSS样式2_表格&表单

CSS样式和JS插件

Bootstrap_全局cSS样式_按钮&图片

　全局样式

　　按钮：class="btn btn-default"

　　图片：

　　　　1.class="img-responsive"：图片在任意尺寸都占100%

　　　　 图片形状

　　　　　　 <img src="..." alt="..." class="img-rounded">：方形

　　　　　　<img     src="..." alt="..." class="img-circle"> ： 圆形

　　　　　　<img src="..." alt="..." class="img-thumbnail"> ：相框

　　表格

　　表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Bootstrap HelloWorld</title>

  <!-- Bootstrap -->
  <link href="../css/bootstrap.min.css" rel="stylesheet">


  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="../js/jquery-3.2.1.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="../js/bootstrap.min.js"></script>

</head>
<body>
    <!--添加css样式后按钮的全局样式-->
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">

<br>
    <!--不同的样式效果-->
    <!--默认样式-->
    <button type="button" class="btn btn-default">（默认样式）Default</button>
    <!--首选项-->
    <button type="button" class="btn btn-primary">（首选项）Primary</button>
    <!--成功-->
    <button type="button" class="btn btn-success">（成功）Success</button>
    <!--一般信息-->
    <button type="button" class="btn btn-info">（一般信息）Info</button>
    <!--警告-->
    <button type="button" class="btn btn-warning">（警告）Warning</button>
    <!--危险-->
    <button type="button" class="btn btn-danger">（危险）Danger</button>
    <!--链接-->
    <button type="button" class="btn btn-link">（链接）Link</button>

<br>
    <!--更改图片样式-->
    <img src="../img/banner_1.jpg" class="img-responsive img-rounded">
    <img src="../img/banner_2.jpg" class="img-responsive img-circle">
    <img src="../img/banner_3.jpg" class="img-responsive img-thumbnail">
</body>
</html>

Bootstrap_全局cSS样式2_表格&表单

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Bootstrap HelloWorld</title>

  <!-- Bootstrap -->
  <link href="../css/bootstrap.min.css" rel="stylesheet">


  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="../js/jquery-3.2.1.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="../js/bootstrap.min.js"></script>

</head>
<body>      <!--分行线  条纹  带边框  鼠标悬停 紧缩表格-->
    <table class="table  table-striped  table-bordered table-hover table-condensed">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>1</td>
            <td>汤姆</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td>杰瑞</td>
            <td>男</td>
        </tr>
        <tr>
            <td>3</td>
            <td>修勾</td>
            <td>女</td>
        </tr>

    </table>
</body>
</html>

 

 

状态类

通过这些状态类可以为行或单元格设置颜色。
Class描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
 

 

 
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>
#Column headingColumn headingColumn heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content

 

posted @ 2022-11-02 09:14  ja不会va  阅读(38)  评论(0)    收藏  举报