BootStrap文档(一)

简介: 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

目录
相关文章
|
2月前
|
机器学习/深度学习 前端开发 算法
BootStrap文档(三)
BootStrap文档
21 0
|
2月前
|
前端开发
BootStrap文档(二)
BootStrap文档
36 0
|
前端开发
BootStrap后台管理常用文档存档
BootStrap后台管理常用文档存档
84 0
BootStrap后台管理常用文档存档
|
前端开发 数据安全/隐私保护
整理的部分bootstrap框架文档
链接:http://pan.baidu.com/s/1slhqCn7 密码:zafg 源码查看 index.html 需先掌握html 将编程看作是一门艺术,而不单单是个技术。 敲打的英文字符是我的黑白琴键, 思维图纸画出的是我编写的五线谱。 当美妙的华章响起,现实通往二进制的大门即将被打开。
888 0
|
前端开发
bootstrap翻译文档
https://github.com/ixiemin/bootstrap-translation
635 0
|
数据可视化 前端开发 Java
N..
|
28天前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
13 0
|
1月前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
9 0
|
1月前
|
前端开发
bootstrap组件
bootstrap组件
15 0