【2020Python修炼记】前端开发之前端框架Bootstrap

方照發表於 2020-5-21 18:42:00

【2020Python修炼记】前端开发之前端框架Bootstrap

<h1>一、简介</h1>
<blockquote>
<h3 class="md-end-block md-p">该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可</h3>
<h3 class="md-end-block md-p">在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可</h3>
<h3 class="md-end-block md-p">版本选择建议使用v3版本：https://v3.bootcss.com/</h3>
<h3 class="md-end-block md-heading">【注意】</h3>
<h3 class="md-end-block md-p md-focus">bootstrap的js代码是依赖于jQuery的，也就意味着你在开发项目时，使用Bootstrap动态效果的时候，一定要导入jQuery。</h3>
方法一： 利用CDN 导入（需要有网络才可以）
<div class="cnblogs_code">
<pre><head>
……

<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
……

</head></pre>
</div>
<h3> 方法二：下载文件到本地，将文件夹加入所在项目中，直接引用--例如引入弹框插件</h3>
<div class="cnblogs_code">
<pre> <link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css">
<script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script></pre>
</div>
<h3> 【注意】</h3>
<h3>导入CSS 文件使用  <link rel="stylesheet" href=" CSS 文件路径 "></h3>
<h3>导入 JS 文件使用 <script src=" js 文件路径 / CDN地址 "></script></h3>
 
</blockquote>
<h1>二、特色框架功能</h1>
<h2 class="md-end-block md-heading md-focus">布局容器</h2>
<div class="cnblogs_code">
<pre><div class="container">
 左右两侧有留白
</div>

<div class="container-fluid">
 左右两侧没有留白
</div> 
# 后续在使用bootstrap做页面的时候上来先写一个div class=container,之后在div内部书写页面</pre>
</div>
<div class="cnblogs_code"><img id="code_img_closed_c0cb8155-f266-4853-958f-b2fdcc0bf6c8" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_c0cb8155-f266-4853-958f-b2fdcc0bf6c8" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_c0cb8155-f266-4853-958f-b2fdcc0bf6c8" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
 .c1 {
 background-color: red;
 height: 100px;
 }
</style>
</head>
<body>
<div class="container c1">

</div>
<br>
<div class="container-fluid c1"></div>
</body>
</html></pre>
</div>
View Code</div>
 
<h2>栅格系统</h2>
<div class="cnblogs_code">
<pre><div class="row"></div>
写一个row 就是将所在的区域划分成 12 份

<div class="col-md-6 ">获取你所要的份数 
# 在使用bootstrap的时候脑子里面一定要做12的加减法</pre>
</div>
<h3 class="md-end-block md-heading md-focus" style="margin-left: 30px">栅格参数</h3>
<div class="cnblogs_code">
<pre>.col-xs- .col-sm- .col-md- .col-lg-
# 针对不同的显示器 bootstrap会自动选择对应的参数
# 如果你想要兼容所有的显示器你就全部加上即可

# 在一行如何移动位置
<div class="col-md-8 c1 col-md-offset-2"></div></pre>
</div>
<div class="cnblogs_code"><img id="code_img_closed_e45c68a3-c385-456d-8347-9c70fc9d2462" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_e45c68a3-c385-456d-8347-9c70fc9d2462" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_e45c68a3-c385-456d-8347-9c70fc9d2462" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
 .c1 {
 background-color: red;
 height: 100px;
 border: 5px solid black;
 }

 @media screen and (max-width: 600px) {
 .c1 {
 background-color: greenyellow;
 height: 100px;
 border: 5px solid black;
 }
 }

</style>
</head>
<body>
<div class="container">
<div class="row">
 <div class="col-md-6 c1 col-xs-6">
 </div>
 <div class="col-md-6 c1 col-xs-6"></div>
 <br>
 <div class="col-md-1c1"></div>
 <div class="col-md-1c1"></div>
 <div class="col-md-1c1"></div>
 <div class="col-md-1c1"></div>
 <div class="col-md-1c1"></div>
 <div class="col-md-1c1"></div>
 <div class="col-md-1c1"></div>
 <div class="col-md-1c1"></div>
 <div class="col-md-1c1"></div>
 <div class="col-md-1c1"></div>
 <div class="col-md-1c1"></div>
 <div class="col-md-1c1"></div>
 <br>
 <div class="col-md-3 c1 "></div>
 <div class="col-md-9 c1 "></div>
 <br>
 <div class="col-md-2 c1"></div>
 <div class="col-md-8 c1"></div>
 <div class="col-md-2 c1"></div>
 <br>
 <div class="col-md-8 c1"></div>
 <div class="col-md-4 c1"></div>
 <br>
 <div class="col-md-8 c1 col-md-offset-2"></div>
</div>
</div>
</body>
</html></pre>
</div>
View Code</div>
 
<h2 class="md-end-block md-heading md-focus">排版</h2>
<blockquote>
<h3 class="md-end-block md-p md-focus">bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式</h3>
<h3 class="md-end-block md-p">效果一样，但是标签表达的意思不一样（语义）</h3>
</blockquote>
<div class="cnblogs_code"><img id="code_img_closed_75924ff4-cfba-4667-a5b5-4730c374cde6" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_75924ff4-cfba-4667-a5b5-4730c374cde6" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_75924ff4-cfba-4667-a5b5-4730c374cde6" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>脱产14期 <small>最牛逼</small></h1>
<p class="lead text-center">撒娇的卡即将开机看见的撒娇的卡即将开机 lead看见的撒娇的卡即将开机看见的撒娇的卡即将开机看见的</p>
<abbr title="详细的解释">小朋友你是啥子</abbr>

<blockquote class="blockquote-reverse">
<p>撒娇的卡即将开机看见的撒娇的卡即将开机</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</body>
</html></pre>
</div>
View Code</div>
 
<h2>表格</h2>
<div class="cnblogs_code">
<pre><table class="table table-hover table-striped table-bordered">

<tr class="success">
 <td>1</td>
 <td>jason</td>
 <td>123</td>
 <td>study</td>
</tr>

<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr></pre>
</div>
<div class="cnblogs_code"><img id="code_img_closed_ff184820-aa78-4675-b6d0-5bf6182e4915" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_ff184820-aa78-4675-b6d0-5bf6182e4915" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_ff184820-aa78-4675-b6d0-5bf6182e4915" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-8 col-md-offset-2">
 <table class="table table-hover table-striped table-bordered">
<thead>
 <tr>
 <th>ID</th>
 <th class="text-center">username</th>
 <th>password</th>
 <th>hobby</th>

 </tr>
</thead>
<tbody>
 <tr class="success">
 <td>1</td>
 <td>jason</td>
 <td>123</td>
 <td>study</td>
 </tr>
 <tr class="warning">
 <td>1</td>
 <td>jason</td>
 <td>123</td>
 <td>study</td>
 </tr>
<tr class="danger">
 <td>1</td>
 <td>jason</td>
 <td>123</td>
 <td>study</td>
 </tr>
<tr class="info">
 <td>1</td>
 <td>jason</td>
 <td>123</td>
 <td>study</td>
 </tr>
<tr>
 <td>1</td>
 <td>jason</td>
 <td>123</td>
 <td>study</td>
 </tr> <tr>
 <td>1</td>
 <td>jason</td>
 <td>123</td>
 <td>study</td>
 </tr>

</tbody>
</table>
</div>
</div>

</body>
</html></pre>
</div>
View Code</div>
 
<h2>表单</h2>
<div class="cnblogs_code">
<pre><div class="container">
<div class="col-md-8 col-md-offset-2">
 <h2 class="text-center">登陆页面</h2>
 <form action="">
 <p>username:<input type="text" class="form-control"></p>
 <p>password:<input type="text" class="form-control"></p>
 <p>
 <select name="" id="" class="form-control">
 <option value="">111</option>
 <option value="">222</option>
 <option value="">333</option>
 </select>
 </p>
 <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
 <input type="submit">
 </form>
</div>
</div>

# 针对表单标签加样式就用form-control
class="form-control"
"""
<input type="checkbox">222
<input type="radio">333
checkbox和radio我们一般不会给它加form-control，直接使用原生的即可
"""

# 针对报错信息可以加has-error（input的父标签加）
<p class="has-error">
username:
<input type="text" class="form-control">
</p></pre>
</div>
<div class="cnblogs_code"><img id="code_img_closed_12c94d25-a79a-48c0-b3e5-8bd91f8d711a" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_12c94d25-a79a-48c0-b3e5-8bd91f8d711a" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_12c94d25-a79a-48c0-b3e5-8bd91f8d711a" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
 span {
 color: greenyellow;
 }
</style>
</head>
<body>
<div class="container">
<div class="col-md-8 col-md-offset-2">
 <h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>
 <form action="">
 <p class="has-error"> <span class="glyphicon glyphicon-heart"></span>username:<input type="text" class="form-control"></p>
 <p><span class="glyphicon glyphicon-heart"></span>password:<input type="text" class="form-control"></p>













 <input type="submit" class="btn btn-primary btn-block">
 </form>
</div>
</div>
</body>
</html></pre>
</div>
View Code</div>
 
<h2>按钮</h2>
<div class="cnblogs_code">
<pre><a href="https://www.mzitu.com/" class="btn btn-primary">点我</a>
<button class="btn btn-danger">按我</button>
<button class="btn btn-default">按我</button>
<button class="btn btn-success">按我</button>
<button class="btn btn-info">按我</button>
<button class="btn btn-warning">按我</button>

<button class="btn btn-warning btn-lg">按我</button>
<button class="btn btn-warning btn-sm">按我</button>
<button class="btn btn-warning btn-xs">按我</button>
<input type="submit" class="btn btn-primary btn-block">
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。</pre>
</div>
<div class="cnblogs_code"><img id="code_img_closed_e935751f-f467-4284-b52c-0056ad1606b8" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_e935751f-f467-4284-b52c-0056ad1606b8" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_e935751f-f467-4284-b52c-0056ad1606b8" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<a href="https://www.mzitu.com/" class="btn btn-primary">点我</a>
<button class="btn btn-danger">按我</button>
<button class="btn btn-default">按我</button>
<button class="btn btn-success">按我</button>
<button class="btn btn-info">按我</button>
<button class="btn btn-warning">按我</button>
<button class="btn btn-warning btn-lg">按我</button>
<button class="btn btn-warning btn-sm">按我</button>
<button class="btn btn-warning btn-xs">按我</button>
<input type="submit" class="btn btn-primary btn-block">

</body>
</html></pre>
</div>
View Code</div>
 
<h2>图标—— </h2>
<div class="cnblogs_code">
<pre><h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>

<style>
 span {
 color: greenyellow;
 }
</style>

# 扩展</pre>
</div>
<div class="cnblogs_code"><img id="code_img_closed_9d64c3a3-b24d-4fb1-a1a3-71e09136ac4d" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_9d64c3a3-b24d-4fb1-a1a3-71e09136ac4d" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_9d64c3a3-b24d-4fb1-a1a3-71e09136ac4d" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-binoculars" aria-hidden="true"></i>
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; 首页</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; 关于我们</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; 后台应用编辑</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; 系统设置</a>

</div>

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</body>
</html></pre>
</div>
View Code</div>
 
<h2>图片</h2>
<div class="cnblogs_code"><img id="code_img_closed_9d33fc08-6a98-4bce-a57d-95cd95ea59a0" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_9d33fc08-6a98-4bce-a57d-95cd95ea59a0" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_9d33fc08-6a98-4bce-a57d-95cd95ea59a0" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<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">
 <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..." class="img-rounded">
 <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..." class="img-circle">
 <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..." class="img-thumbnail">
 </div>
</div>
</div>
</body>
</html></pre>
</div>
View Code</div>
 
<h2>导航条</h2>
<div class="cnblogs_code">
<pre><nav class="navbar navbar-inverse">
<nav class="navbar navbar-default"></pre>
</div>
<div class="cnblogs_code"><img id="code_img_closed_0b91e7b1-58b4-4d5c-aa5c-bd4d3a9a2d0e" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_0b91e7b1-58b4-4d5c-aa5c-bd4d3a9a2d0e" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_0b91e7b1-58b4-4d5c-aa5c-bd4d3a9a2d0e" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse ">
<div class="container-fluid">

<div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Brand</a>
</div>


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 <li><a href="#">Link</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li role="separator" class="divider"></li>
 <li><a href="#">Separated link</a></li>
 <li role="separator" class="divider"></li>
 <li><a href="#">One more separated link</a></li>
 </ul>
 </li>
 </ul>
 <form class="navbar-form navbar-left">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="Search">
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
 </form>
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#">Link</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li role="separator" class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
 </li>
 </ul>
</div>
</div>
</nav>
<div class="container">
<h1>亚洲最大的线上赌场开业了 <small>快来体验哦</small></h1>
<div class="row">
 <div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
</a>
</div>
 <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
</a>
</div>
 <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
</a>
</div>
 <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
</a>
</div>
...
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
</a>
</div>
 <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
</a>
</div>
 <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
</a>
</div>
 <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
</a>
</div>
...
</div>

<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
 <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1998860851,82672002&fm=26&gp=0.jpg" alt="...">
 <div class="caption">
 <h3>Thumbnail label</h3>
 <p>...</p>
 <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
 </div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
 <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1998860851,82672002&fm=26&gp=0.jpg" alt="...">
 <div class="caption">
 <h3>Thumbnail label</h3>
 <p>...</p>
 <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
 </div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
 <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1998860851,82672002&fm=26&gp=0.jpg" alt="...">
 <div class="caption">
 <h3>Thumbnail label</h3>
 <p>...</p>
 <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
 </div>
</div>
</div>
</div>
</div>
</body>
</html></pre>
</div>
View Code</div>
 
<h2>分页器</h2>
<div class="cnblogs_code">
<pre><nav aria-label="Page navigation">
<ul class="pagination">
<li>
 <a href="#" aria-label="Previous">
 <span aria-hidden="true">&laquo;</span>
 </a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
 <a href="#" aria-label="Next">
 <span aria-hidden="true">&raquo;</span>
 </a>
</li>
</ul>
</nav></pre>
</div>
<h2>多页内容</h2>
<div class="cnblogs_code"><img id="code_img_closed_45f7be8d-c72a-42f8-bbec-9786884a54ba" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_45f7be8d-c72a-42f8-bbec-9786884a54ba" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_45f7be8d-c72a-42f8-bbec-9786884a54ba" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css">
<script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script>
</head>
<body>
<div>


<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>


<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
 20号技师
</div>
<div role="tabpanel" class="tab-pane" id="profile">
 21号技师
</div>
<div role="tabpanel" class="tab-pane" id="messages">
 22号技师
</div>
<div role="tabpanel" class="tab-pane" id="settings">
 23号技师
</div>
</div>

</div>
</body>
</html></pre>
</div>
View Code</div>
<h2>进度条</h2>
<div class="cnblogs_code"><img id="code_img_closed_4669df4b-7e09-498a-881c-a067245a6a31" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_4669df4b-7e09-498a-881c-a067245a6a31" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_4669df4b-7e09-498a-881c-a067245a6a31" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress">
<div id='d2' class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 10%">

</div>
</div>
<button id="d1" class="btn btn-danger">跑起来</button>

<script>
function func(i){
 let tempWidth = 'width:' + i + '%'// style
 let contentText = i + '%' // 文本
 $('#d2').attr('style',tempWidth).text(contentText)
}
$('#d1').click(function () {
 for(let i=0;i<101;i++){
 setInterval(func(i),5000)
 }
})
</script>
</body>
</html></pre>
</div>
View Code</div>
 
<h2>弹框</h2>
<h3>https://lipis.github.io/bootstrap-sweetalert/</h3>
<div class="cnblogs_code">
<pre>

swal('你还好吗?')
undefined
swal('你还好吗?')
undefined
swal('你还好吗?','我不好，想你了!')
undefined
swal('你还好吗?','我不好，想你了!','success')
undefined
swal('你还好吗?','我不好，想你了!','warning')
undefined
swal('你还好吗?','我不好，想你了!','error')
undefined
swal('你还好吗?','我不好，想你了!','info')
undefined
# 我们在后面的课程中还会涉及到该部分内容</pre>
</div>
 
<h2>更多精彩：</h2>
<blockquote>
Bootstrap 中文文档 ·——Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。 
https://v3.bootcss.com/
 
全局 CSS 样式 · Bootstrap v3 中文文档
【CSS】
https://v3.bootcss.com/css/
【组件】
https://v3.bootcss.com/components/
【JavaScript 插件】
https://v3.bootcss.com/javascript/
 
前端资源汇总：
https://www.cnblogs.com/bigorangecc/p/12874459.html
 
</blockquote>
 

</div>
<div id="MySignature" role="contentinfo">
🐱不负韶华，只争朝夕🍚 
来源：https://www.cnblogs.com/bigorangecc/p/12932617.html

頁: [1]

琼殿技术论坛's Archiver

【2020Python修炼记】前端开发之 前端框架Bootstrap

【2020Python修炼记】前端开发之前端框架Bootstrap