Bootstrap框架

it2022-05-07 50

Bootstrap框架

1.生态环境下载

https://v3.bootcss.com/getting-started/#download

2.CDN简介（内容分发网络）

CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

3.bootstrap文件划分

js：只需要留一个bootstrap.min.js即可css：只需要留一个bootstrap.min.css即可fonts：都是必须的，不需要我们手动导入，js文件会自动查找导入对于的fonts文件

注意：bootstrap中的js文件依赖于jQuery，所以使用bootstrap需要先导入jQuery

4.布局容器

<div class='container'> 左右有固定留白 </div> <div class='container-fluid'> 全屏展示 </div>

5.栅格系统

row(行)col(列)

一个row就表示一行（这一行默认给你均分成了12份，每一份还可以均分成12份）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <style> .c1 { background-color: red; height:50px; border:3px solid black; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 c1"></div> <div class="col-md-6 c1"></div> </div> </div> </body> </html>

6.媒体查询

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <style> .c1 { background-color: red; height:50px; border:3px solid black; } @media screen and (max-width: 600px){ .c1 { background-color: green; height:50px; border:3px solid black; } } /*当宽度小于600px的时候背景颜色就会变绿*/ </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 c1"></div> <div class="col-md-6 c1"></div> </div> </div> </body> </html>

7.列偏移

8.表格标签

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <table class="table table-hover table-bordered table-striped"> <thead> <tr class="info ">  <th class="text-center">name</th> <th class="text-center">password</th> <th class="text-center">hobby</th> </tr> </thead> <tbody> <tr class="success">  <td class="text-center">lucas</td> <td class="text-center">123</td> <td class="text-center">学习</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>

9.按钮

<div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <button class="btn btn-success">button</button> <button class="btn btn-info">button</button> <button class="btn btn-warning">button</button> <button class="btn btn-danger">button</button> <button class="btn btn-primary">button</button> <a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a> </div> </div> </div>

10.快速浮动

转载于:https://www.cnblogs.com/yanminggang/p/10976544.html

专利

最新回复(0)