AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

BootStrap文档（一）

2024-02-01 93
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： BootStrap文档

Bootstrap概念

1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。

好处：

1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。

2. 响应式布局。

同一套页面可以兼容不同分辨率的设备。 例如：http://m.taobao.com https://www.apple.com/

https://www.bootcss.com 官网

快速入门

下载Bootstrap


在项目中将这三个文件夹复制

min压缩版，上线之后一般用的压缩版

引入资源文件

手动引入jquery-3.2.1.min.js

根据参考文档找到基本模版 注意：引入文件的顺序问题

<!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 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="bootstrap-3.4.1-dist/js/jquery-3.4.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

响应式布局

同一套页面可以兼容不同分辨率的设备。

实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

栅格系统：

  1. 定义容器。相当于之前的table、

容器分类：

1. container ：两边留白

2. container-fluid：每一种设备都是100%宽度

  1. 定义行。相当于之前的tr 样式：row
  2. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

设备代号：

1. xs：超小屏幕 手机 (<768px)：col-xs-12

2. sm：小屏幕 平板 (≥768px)

3. md：中等屏幕 桌面显示器 (≥992px)

4. lg：大屏幕 大桌面显示器 (≥1200px)

<!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 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
   <style>
     .row div {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 定义容器-->
    <div class="container">
    <!-- 定义行 -->
      <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
      </div>
      <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
      </div>
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div>
      <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
      </div>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.4.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="hs/bootstrap.min.js" crossorigin="anonymous"></script>
  </body>
</html>

注意：

  1. container留白
  2. 一行中如果格子数目超过12，则超出部分自动换行。
  3. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。.col-xs –>向上兼容

4. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，缩小会一个元素沾满一整行。

列偏移

<!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>入门</title>
    <!-- bootstrap.min.css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
    .row div{
      border: 1px solid green;
    }
  </style>
  </head>
  <body>
    <!-- 定义容器-->
    <div class="container-fluid">
      <!-- 第一行-->
      <div class="row">
       <div class="col-md-1">江一燕</div>
       <div class="col-md-1">江一燕</div>
       <div class="col-md-1">江一燕</div>
       <div class="col-md-1">江一燕</div>
       <div class="col-md-1">江一燕</div>
       <div class="col-md-1">江一燕</div>
       <div class="col-md-1">江一燕</div>
       <div class="col-md-1">江一燕</div>
       <div class="col-md-1">江一燕</div>
       <div class="col-md-1">江一燕</div>
       <div class="col-md-1">江一燕</div>
       <div class="col-md-1">江一燕</div>
      </div>
      <!-- 列偏移-->
      <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4 col-md-offset-4">col-md-4</div>
      </div>
      <!-- 列偏移-->
      <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3 col-md-offset-6">col-md-3 col-md-offset-6</div>
      </div>
      <!-- 列偏移-->
      <div class="row">
        <div class="col-md-2 col-md-offset-4">col-md-2 col-md-offset-4</div>
        <div class="col-md-6">col-md-6</div>
      </div>
    </div>
    <!-- 引入jQuery -->
    <script src="js/jquery-3.4.1.js"></script>
    <!-- js/bootstrap.min.js -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS样式和JS插件

按钮

按钮：class=“btn btn-default”

<!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 101 Template</title>
      <!--引入Bootstrap相关的3个文件 -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <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">
    <Hr>
    <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>
</body>
</html>

图片

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 101 Template</title>
    <!--引入Bootstrap相关的3个文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
<style>
      img{
        width: 450px;
      }
   </style>
</head>
<body>
    <img src="img/banner_1.jpg" class="img-responsive" alt="Responsive image">
    <!--设置图片的样式  img-responsive 占100%-->
    <!--正方型-->
    <img src="img/banner_1.jpg" class="img-responsive img-rounded" alt="Responsive image">
    <!--相框型-->
    <img src="img/banner_1.jpg" class="img-responsive img-thumbnail" alt="Responsive image">
    <!--圆型型-->
    <img src="img/banner_1.jpg" class="img-responsive img-circle" alt="Responsive image">
</body>
</html>

表格

table 表格

table-bordered 边框

table-hover 鼠标悬停

<!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 101 Template</title>
    <!--引入Bootstrap相关的3个文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>001</td>
        <td>张三</td>
        <td>23</td>
    </tr>
    <tr>
        <td>002</td>
        <td>张三</td>
        <td>23</td>
    </tr>
    <tr>
        <td>002</td>
        <td>张三</td>
        <td>23</td>
    </tr>
</table>
</div>
</body>
</html>

表单

给表单项添加：class=“form-control”

<!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 101 Template</title>
    <!--引入Bootstrap相关的3个文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
<style>
    .form-control{
        width: 400px;
    }
</style>
</head>
<body>
<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>
</body>
</html>


BootStrap文档（二）https://developer.aliyun.com/article/1433669

文章标签：
前端开发
容器
JavaScript
编解码
关键词：
Bootstrap文档
Zh.晨光
目录
相关文章
Zh.晨光
|
6月前
|
前端开发
BootStrap文档（二）
BootStrap文档
Zh.晨光
50 0
Zh.晨光
|
6月前
|
机器学习/深度学习 前端开发 算法
BootStrap文档（三）
BootStrap文档
Zh.晨光
35 0
红目香薰
|
前端开发
BootStrap后台管理常用文档存档
BootStrap后台管理常用文档存档
红目香薰
99 0
BootStrap后台管理常用文档存档
walb呀
|
Web App开发 JavaScript 前端开发
基于Metronic的Bootstrap开发框架经验总结（17）-- 使用 summernote插件实现HTML文档的编辑和图片插入操作
walb呀
1809 0
kdmktdi2qut24
|
前端开发 数据安全/隐私保护
整理的部分bootstrap框架文档
链接：http://pan.baidu.com/s/1slhqCn7 密码：zafg 源码查看 index.html 需先掌握html 将编程看作是一门艺术，而不单单是个技术。 敲打的英文字符是我的黑白琴键， 思维图纸画出的是我编写的五线谱。 当美妙的华章响起，现实通往二进制的大门即将被打开。
kdmktdi2qut24
916 0
自娱
|
数据可视化 前端开发 Java
Bootstrap可视化布局系统使用文档
自娱
11065 0
cnbird
|
前端开发
bootstrap翻译文档
https://github.com/ixiemin/bootstrap-translation
cnbird
653 0
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
66 0
汪末末
|
前端开发 容器
Bootstrap 组件：嵌入效果（Well）
Bootstrap 框架
汪末末
72 0
Bootstrap 组件：嵌入效果（Well）
汪末末
|
前端开发 容器
Bootstrap 组件：面板组件（panel）
Bootstrap 框架
汪末末
133 0
Bootstrap 组件：面板组件（panel）

热门文章

最新文章

  • 1
    start.aliyun.com 正式上线！极速构建 bootstrap 应用
  • 2
    PHPStorm中使用bootstrap3控件！
  • 3
    Bootstrap系列 -- 12. 水平表单
  • 4
    Bootstrap的学习以及简单运用
  • 5
    Bootstrap-轮播图-No.2
  • 6
    使用国人的koala来重新预编译BOOTSTRAP的LESS文件
  • 7
    bootstrap51-Bootstrap 基本的输入框组
  • 8
    bootstrap-表单控件——输入框input
  • 9
    bootstrap-带有头和尾的面板
  • 10
    bootstrap-面板--基础面板
  • 1
    R语言广义线性混合模型（GLMM）bootstrap预测置信区间可视化
    99
  • 2
    【专栏：HTML与CSS实践篇】CSS框架（Bootstrap/Foundation）快速上手
    122
  • 3
    r语言Bootstrap自助法重采样构建统计量T抽样分布近似值可视化|代码分享
    98
  • 4
    R语言对综合社会调查GSS数据进行自举法bootstrap统计推断、假设检验、探索性数据分析可视化|数据分享（下）
    82
  • 5
    R语言对综合社会调查GSS数据进行自举法bootstrap统计推断、假设检验、探索性数据分析可视化|数据分享（上）
    79
  • 6
    Bootstrap 5 保姆级教程（十五）：表单
    318
  • 7
    Bootstrap 5 保姆级教程（十四）：Flex
    101
  • 8
    Bootstrap 5 保姆级教程（十三）：滚动监听 & 侧边栏导航
    106
  • 9
    Bootstrap 5 保姆级教程（十二）：弹出框 & 消息弹窗
    178
  • 10
    Bootstrap 5 保姆级教程（十一）：模态框 & 提示框
    85

    • 相关课程

    更多
  • 前端开发框架Bootstrap使用教程
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云OSS设置跨域访问