Bootstrap

发布时间：2020-12-17 21:24:46 所属栏目：安全来源：网络整理

导读：1.版本号 ????????2 主要做pc端基本上没啥人用了 ????????3 移动设备优先基本上都在用（为主） ????????4 移动设备优先放弃了老版本的IE，看实际情况使用? ? ? ?? ?使用的版本?3.3.5 Bootstrap中文网：https://v3.bootcss.com/css/#buttons ? 使用Bootstr

1.版本号

????????2 主要做pc端基本上没啥人用了

????????3 移动设备优先基本上都在用（为主）

????????4 移动设备优先放弃了老版本的IE，看实际情况使用? ? ? ??

?使用的版本?3.3.5

Bootstrap中文网：https://v3.bootcss.com/css/#buttons

使用Bootstrap的注意事项

　1.指定语言的类型

<html lang="zh-CN">

　2.设置meta标签，为了兼容老版本的IE

<meta http-equiv="X-UA-Compatible" content="IE=edge">

　3.必须项，设置视口

<meta name="viewport" content="width=device-width,initial-scale=1">

　4.引入bootstrap的主文件

<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">

　5.处理兼容性的js文件

? ? cssHack 条件注释法

　6.引入jquery，因为bootstrap是依赖于jquery，所以jquery必须放在前面先加载?

　　?最好使用bootstrap自己带的jquery

<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>

　7.引入bootstrap中所需要用到的JavaScript插件

<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>

如下代码：

!DOCTYPE html>
<!-- 1.指定语言的类型 -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 2.设置meta标签，为了兼容老版本的IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 3.必须项，设置视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>

    <!-- 4.引入bootstrap的主文件 -->
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">

    <!-- 5.处理兼容性的js文件
        cssHack  条件注释法 -->
    <!--[if lt IE 9]>
      <script src="bootstrap-3.3.5-dist/js/html5shiv.min.js"></script>
      <script src="bootstrap-3.3.5-dist/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">     <!-- 最大的一个使用宽度为970px -->
        这个是container容器
    </div>
    <div class="container-fluid">     <!-- 使用宽度为100% -->
        这个是container-fluid容器
    </div>


    <!-- 6.引入jquery，因为bootstrap是依赖于jquery，所以jquery必须放在前面先加载 -->
    <!-- 最好使用bootstrap自己带的jquery -->
    <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <!-- 7.引入bootstrap中所需要用到的JavaScript插件 -->
    <script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
</body>
</html>

表格

一般表格

<table class="table">
  ...
</table>

条纹状表格

通过?.table-striped?类可以给?<tbody>?之内的每一行增加斑马条纹样式。

<table class="table table-striped">
  ...
</table>

带边框的表格：添加?.table-bordered?类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
  ...
</table>

鼠标悬停： 通过添加?.table-hover?类可以让?<tbody>?中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover">
  ...
</table>

紧缩表格：通过添加?.table-condensed?类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

<table class="table table-condensed">
  ...
</table>

状态类： 通过这些状态类可以为行或单元格设置颜色。

按钮的颜色

（默认样式）Default 
（首选项）Primary 
（成功）Success 
（一般信息）Info 
（警告）Warning 
（危险）Danger
         -->
         <h3>按钮的颜色</h3>
         <a href="" class="btn btn-default">基础颜色</a>
         <a href="" class="btn btn-primary">首选项-深蓝色</a>
         <a href="" class="btn btn-success">成功色-绿色</a>
         <a href="" class="btn btn-info">提示色-浅蓝色</a>
         <a href="" class="btn btn-warning">警告色-黄色</a>
         <a href="" class="btn btn-danger">危险色-红色</a>
         <h3>按钮的尺寸</h3>
         <a href="" class="btn btn-primary btn-lg">大按钮</a>
         <a href="" class="btn btn-success">中按钮（默认演示）</a>
         <a href="" class="btn btn-info btn-sm">小按钮</a>
         <a href="" class="btn btn-warning btn-xs">超小按钮</a>
         <h3>块级按钮</h3>
         <a href="" class="btn btn-danger btn-block btn-lg">块级按钮</a>
         <a href="" class="btn btn-warning btn-block">块级按钮</a>
         <a href="" class="btn btn-default btn-block btn-sm">块级按钮</a>
         <a href="" class="btn btn-info btn-block btn-xs">块级按钮</a>

按钮激活状态

button 元素

表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

链接（<a>）元素

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

禁用状态

通过为按钮的背景设置?opacity?属性就可以呈现出无法点击的效果。

button 元素为?<button>?元素添加?disabled?属性，使其表现出禁用状态。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

链接（<a>）元素为基于?<a>?元素创建的按钮添加?.disabled?类。

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

图片形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

三角符号通过使用三角符号可以指示某个元素具有下拉菜单的功能

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!