{"id":2019,"date":"2023-03-25T14:33:59","date_gmt":"2023-03-25T06:33:59","guid":{"rendered":""},"modified":"2023-03-25T14:33:59","modified_gmt":"2023-03-25T06:33:59","slug":"Bootstrap Spinners","status":"publish","type":"post","link":"https:\/\/bianchenghao6.com\/2019.html","title":{"rendered":"Bootstrap Spinners"},"content":{"rendered":"


\n <\/head>
\n <\/p>\n

\n

Bootstrap Spinners<\/h1>\n<\/p><\/div>\n

Bootstrap Spinners <\/h2>\n
\n Spinner\u4e5f\u79f0\u4e3a\u52a0\u8f7d\u6307\u793a\u5668\u3002\u5b83\u7528\u4e8e\u663e\u793a\/\u6307\u793a\u6211\u4eec\u9879\u76ee\u7684\u52a0\u8f7d\u72b6\u6001\u3002 Bootstrap\u4f7f\u7528 .spinner \u7c7b\u521b\u5efaSpinner\u3002\n <\/div>\n
\n \u6211\u4eec\u4f7f\u7528\u4ee5\u4e0b\u8bed\u6cd5\u5728Bootstrap -\n <\/div>\n
\n
<div class <\/span>= \"spinner-border\"<\/span>> <\/div><\/pre>\n
<\/code>\n  <\/div>\n
Spinners\u7684\u7c7b\u578b<\/h3>\n
\n    \u6211\u4eec\u4f7f\u7528Bootstrap\u521b\u5efa\u4ee5\u4e0b\u7c7b\u578b\u7684Spinners-\n  <\/div>\n
 1\u3001Spinners\u8fb9\u6846<\/h3>\n
\n    \u8fb9\u6846Spinners\u7528\u4e8e\u8f7b\u91cf\u6307\u793a\u5668\u3002\n  <\/div>\n
\n    \u6211\u4eec\u4f7f\u7528\u4ee5\u4e0b\u8bed\u6cd5\u5728Bootstrap\u4e2d\u521b\u5efa\u8fb9\u6846Spinners-\n  <\/div>\n
\n    \u8bed\u6cd5:\n  <\/div>\n
\n
<div class <\/span>= \"spinner-border\"<\/span> role = \"status\"<\/span>>\r\n  <span class <\/span>= \"sr-only\"<\/span>>Loading...<\/span>\r\n<\/div><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u4ee3\u7801:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang = \"en\"<\/span>>\r\n<head>\r\n    <meta charset = \"UTF-8\"<\/span>>\r\n    <meta name = \"viewport\"<\/span> content = \"width=device-width, initial-scale=1.0\"<\/span>>\r\n    <title>Bootstrap Border Spinner Example<\/title>\r\n    <!--Bootstrap CDN-->\r\n    <link rel = \"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n  <style>\r\n      .container {\r\n          text-align: center;\r\n          \r\n      }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n    <div class <\/span>= \"container\"<\/span>>\r\n        <div class <\/span>= \"jumbotron\"<\/span>>\r\n          <h1>Border Spinner Example<\/h1> \r\n          <div class <\/span>= \"spinner-border\"<\/span> role = \"status\"<\/span>> \r\n              <!--status notify to Screen reader that this<\/span> element is in the process-->\r\n              <span class <\/span>= \"sr-only\"<\/span>>Loading...<\/span>\r\n              <!--sr-only class <\/span>hidden in normal devices, but it can be detected by screen readers-->\r\n          <\/div> \r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
 2\u3001Spinners\u989c\u8272<\/h3>\n
\n    \u6211\u4eec\u4f7f\u7528\u4ee5\u4e0b\u8bed\u6cd5\u5728Bootstrap\u4e2d\u521b\u5efa\u5f69\u8272Spinners-\n  <\/div>\n
\n
<div class <\/span>= \"spinner-border text-light\"<\/span> role = \"status\"<\/span>>\r\n  <span class <\/span>= \"sr-only\"<\/span>>Loading...<\/span>\r\n<\/div><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u4ee3\u7801:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang = \"en\"<\/span>>\r\n<head>\r\n    <meta charset = \"UTF-8\"<\/span>>\r\n    <meta name = \"viewport\"<\/span> content = \"width=device-width, initial-scale=1.0\"<\/span>>\r\n    <title>Bootstrap Border Spinner Example<\/title>\r\n    <!--Bootstrap CDN-->\r\n    <link rel = \"stylesheet\"<\/span> href = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>>\r\n    <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/script>\r\n    <script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"<\/span>><\/script>\r\n    <script src = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n    <style>\r\n        .container {\r\n            text-align: center;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class <\/span>= \"container\"<\/span>>\r\n        <div class <\/span>= \"jumbotron\"<\/span>>\r\n            <h1>Colored Spinner Example<\/h1>\r\n            <!--Colored Spinners-->\r\n            <div class=\"spinner-border text-muted\"<\/span> role=\"status\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>\r\n                <span class=\"sr-only\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-border text-success\"<\/span> role = \"status\">\r\n                <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-border text-info\"<\/span> role = \"status\">\r\n                <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-border text-light\"<\/span> role = \"status\">\r\n                <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-border text-primary\"<\/span> role = \"status\">\r\n                <span class=\"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-border text-secondary\"<\/span> role = \"status\">\r\n                <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-border text-danger\"<\/span> role = \"status\">\r\n                <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-border text-warning\"<\/span> role = \"status\">\r\n                <span class <\/span>= \"sr-only\">Loading....<\/span>\r\n                <div class <\/span>= \"spinner-border text-dark\"<\/span> role = \"status\">\r\n                    <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
 3\u3001Spinners\u52a0\u8f7d<\/h3>\n
\n    \u6211\u4eec\u4f7f\u7528 .spinner-grow \u7c7b\u5728Bootstrap\u4e2d\u521b\u5efa\u52a0\u8f7d\u4e2d\u7684Spinners\u3002\n  <\/div>\n
\n    \u8bed\u6cd5:\n  <\/div>\n
\n
<div class <\/span>= \"spinner-grow\"<\/span> role = \"status\"<\/span>> \r\n     <span class <\/span>= \"sr-only\"<\/span>>Loading<\/span>\r\n<\/div><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u4ee3\u7801:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang = \"en\"<\/span>>\r\n<head>\r\n    <meta charset = \"UTF-8\"<\/span>>\r\n    <meta name = \"viewport\"<\/span> content=\"width=device-width, initial-scale=1.0\"<\/span>>\r\n    <title>Bootstrap Growing Spinner Example<\/title>\r\n    <!--Bootstrap CDN-->\r\n    <link rel = \"stylesheet\"<\/span> href = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/head>  \r\n<\/head>\r\n<body>\r\n    <div class <\/span>= \"container\"<\/span>>\r\n        <div class <\/span>= \"jumbotron\"<\/span>>\r\n            <h1>Growing Spinner Example<\/h1>\r\n            <!--Growing Spinner-->\r\n            <div class <\/span>= \"spinner-grow\"<\/span> role = \"status\"<\/span>>\r\n                <span class <\/span>= \"sr-only\"<\/span>>Loading...<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
 4\u3001Spinners\u52a0\u8f7d\u989c\u8272<\/h3>\n
\n    \u6211\u4eec\u4f7f\u7528\u4ee5\u4e0b\u8bed\u6cd5\u5728Bootstrap\u4e2d\u521b\u5efa\u5f69\u8272\u751f\u957fSpinners\u3002\n  <\/div>\n
\n    \u8bed\u6cd5:\n  <\/div>\n
\n
<div class <\/span>= \"spinner-grow text-success\"<\/span> role = \"status\"<\/span>> \r\n    <span class <\/span>= \"sr-only\"<\/span>>Loading...<\/span>\r\n<\/div><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u4ee3\u7801:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang = \"en\"<\/span>>\r\n<head>\r\n    <meta charset = \"UTF-8\"<\/span>>\r\n    <meta name = \"viewport\"<\/span> content=\"width=device-width, initial-scale=1.0\"<\/span>>\r\n    <title>Bootstrap Colored Growing Spinner Example<\/title>\r\n    <!--Bootstrap CDN-->\r\n    <link rel = \"stylesheet\"<\/span> href = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/head>  \r\n<\/head>\r\n<body>\r\n    <div class <\/span>= \"container\"<\/span>>\r\n        <div class <\/span>= \"jumbotron\"<\/span>>\r\n            <h1>Colored Growing Spinner Example<\/h1>\r\n            <!--Colored Growing Spinner-->\r\n            <div class <\/span>= \"spinner-grow text-success\"<\/span> role = \"status\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span>> \r\n                <span class <\/span>= \"sr-only\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span>>Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-grow text-light\"<\/span> role = \"status\"> \r\n                <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-grow text-dark\"<\/span> role = \"status\"> \r\n                <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-grow text-warning\"<\/span> role = \"status\"> \r\n                <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-grow text-secondary\"<\/span> role = \"status\"> \r\n                <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-grow text-danger\"<\/span> role = \"status\"> \r\n                <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            <div class <\/span>= \"spinner-grow text-primary\"<\/span> role = \"status\"> \r\n                <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n            <\/div>\r\n            \r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\u66f4\u6539Spinners\u5bf9\u9f50\u65b9\u5f0f<\/h3>\n
\n    Bootstrap\u5141\u8bb8\u6211\u4eec\u4f7f\u7528\u8fb9\u8ddd\u548c\u653e\u7f6e\u5b9e\u7528\u7a0b\u5e8f\u6765\u66f4\u6539Spinners\u5bf9\u9f50\u65b9\u5f0f\u3002\n  <\/div>\n
 1\u3001\u4f7f\u7528\u8fb9\u8ddd<\/h3>\n
\n    \u8fb9\u8ddd\u7528\u4e8e\u6839\u636e\u6211\u4eec\u9879\u76ee\u7684\u8981\u6c42\u63d0\u4f9b\u9002\u5f53\u7684\u95f4\u8ddd\u3002\n  <\/div>\n
\n    \u8bed\u6cd5:\n  <\/div>\n
\n    \u8bed\u6cd5:\n  <\/div>\n
\n
<div class <\/span>= \"spinner-border m-5\"<\/span> role = \"status\"<\/span>>\r\n  <span class <\/span>= \"sr-only\"<\/span>>Loading...<\/span>\r\n<\/div><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u4ee3\u7801:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang = \"en\"<\/span>>\r\n<head>\r\n    <meta charset = \"UTF-8\"<\/span>>\r\n    <meta name = \"viewport\"<\/span> content=\"width=device-width, initial-scale=1.0\"<\/span>>\r\n    <title>Bootstrap Spinner Margin Example<\/title>\r\n    <!--Bootstrap CDN-->\r\n    <link rel = \"stylesheet\"<\/span> href = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/head>  \r\n<\/head>\r\n<body>\r\n    <div class <\/span>= \"container\"<\/span>>\r\n        \r\n            <h1> Spinner Margin Example<\/h1>\r\n            <!--Spinner Margin-->\r\n            <div class=\"spinner-border m-5\"<\/span> role=\"status\"<\/span>>\r\n                <span class=\"sr-only\"<\/span>>Loading...<\/span>\r\n              <\/div>\r\n            \r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
 2\u3001\u66f4\u6539\u6587\u672c\u5bf9\u9f50\u65b9\u5f0f<\/h3>\n
\n    .text-center \u7c7b\u7528\u4e8e\u66f4\u6539\u6587\u672c\u5bf9\u9f50\u65b9\u5f0f\u3002\n  <\/div>\n
\n
<div class <\/span>= \"text-center\"<\/span>>\r\n  <div class <\/span>= \"spinner-border\"<\/span> role = \"status\"<\/span>>\r\n    <span class <\/span>= \"sr-only\"<\/span>>Loading...<\/span>\r\n  <\/div>\r\n<\/div><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u4ee3\u7801:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang = \"en\"<\/span>>\r\n<head>\r\n    <meta charset = \"UTF-8\"<\/span>>\r\n    <meta name = \"viewport\"<\/span> content=\"width=device-width, initial-scale=1.0\"<\/span>>\r\n    <title>Bootstrap Text alignment Example<\/title>\r\n    <!--Bootstrap CDN-->\r\n    <link rel = \"stylesheet\"<\/span> href = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<style>\r\n    .jumbotron {\r\n        text-align: center;\r\n    }\r\n<\/style>  \r\n<\/head>\r\n<body>\r\n    <div class <\/span>= \"container\"<\/span>>\r\n        <div class <\/span>= \"jumbotron\"<\/span>>\r\n            <h1> Spinner Text alignemt Example<\/h1>\r\n            <!--Change the text alignment-->\r\n            <div class <\/span>= \"text-center\"<\/span>>\r\n                <div class <\/span>= \"spinner-border text-success\"<\/span> role = \"status\"<\/span><\/span><\/span>>\r\n                    <span class <\/span>= \"sr-only\"<\/span><\/span><\/span>>Loading...<\/span>\r\n                  <\/div>\r\n                <div class <\/span>= \"spinner-border text-warning\"<\/span> role = \"status\">\r\n                  <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n                <\/div>\r\n                <div class <\/span>= \"spinner-border text-dark\"<\/span> role = \"status\">\r\n                    <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n                  <\/div>\r\n              <\/div>           \r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
 3\u3001\u4f7f\u7528Flexbox <\/h3>\n
\n    \u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u8bed\u6cd5\u901a\u8fc7Flexbox\u66f4\u6539Spinners\u5bf9\u9f50\u65b9\u5f0f-\n  <\/div>\n
\n    \u8bed\u6cd5:\n  <\/div>\n
\n
<div class <\/span>= \"d-flex align-items-center text-success\"<\/span>>\r\n              <strong>Loading...<\/strong>\r\n              <div class <\/span>= \"spinner-border ml-auto\"<\/span> role = \"status\"<\/span> aria-hidden = \"true\"<\/span>>\r\n               <\/div><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u4ee3\u7801:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang = \"en\"<\/span>>\r\n<head>\r\n    <meta charset = \"UTF-8\"<\/span>>\r\n    <meta name = \"viewport\"<\/span> content=\"width=device-width, initial-scale=1.0\"<\/span>>\r\n    <title>Bootstrap Flexbox Spinner Example<\/title>\r\n    <!--Bootstrap CDN-->\r\n    <link rel = \"stylesheet\"<\/span> href = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<style>\r\n    .jumbotron {\r\n        text-align: center;\r\n        margin: 20px;\r\n    }\r\n<\/style>  \r\n<\/head>\r\n<body>\r\n    <div class <\/span>= \"container text-primary\"<\/span>>\r\n        <div class <\/span>= \"jumbotron text-align-center\"<\/span>>\r\n            <h1> Spinner Flexbox alignment Example<\/h1>\r\n            <!--Change alignment using Flexbox-->\r\n            <div class <\/span>= \"d-flex align-items-center text-success\"<\/span>>\r\n              <strong>Loading...<\/strong>\r\n              <div class <\/span>= \"spinner-border ml-auto\"<\/span> role = \"status\"<\/span> aria-hidden = \"true\"<\/span>>\r\n               <\/div>\r\n            <\/div>         \r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
 4\u3001\u4f7f\u7528Float <\/h3>\n
\n    \u6211\u4eec\u4f7f\u7528\u4ee5\u4e0b\u8bed\u6cd5\u4f7f\u7528Float\u66f4\u6539Spinners\u5bf9\u9f50-\n  <\/div>\n
\n    \u8bed\u6cd5:\n  <\/div>\n
\n
<div class <\/span>= \"clearfix\"<\/span>>\r\n  <div class <\/span>= \"spinner-border float<\/span>-right\"<\/span> role = \"status\"<\/span>>\r\n    <span class <\/span>= \"sr-only\"<\/span>>Loading...<\/span>\r\n  <\/div>\r\n<\/div><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u4ee3\u7801:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang = \"en\"<\/span>>\r\n<head>\r\n    <meta charset = \"UTF-8\"<\/span>>\r\n    <meta name = \"viewport\"<\/span> content=\"width=device-width, initial-scale=1.0\"<\/span>>\r\n    <title>Bootstrap float<\/span> Spinner Example<\/title>\r\n    <!--Bootstrap CDN-->\r\n    <link rel = \"stylesheet\"<\/span> href = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<style>\r\n    .jumbotron {\r\n        text-align: center;\r\n        margin: 20px;\r\n    }\r\n<\/style>  \r\n<\/head>\r\n<body>\r\n    <div class <\/span>= \"container text-success\"<\/span>>\r\n        <div class <\/span>= \"jumbotron text-align-center\"<\/span>>\r\n            <h1> Spinner float<\/span> alignment Example<\/h1>\r\n            <!--Change alignment using float<\/span>-->\r\n            <div class <\/span>= \"clearfix\"<\/span>>\r\n              <strong>Loading Page...<\/strong>\r\n              <div class <\/span>= \"spinner-border float<\/span>-right text-primary\"<\/span> role = \"status\"<\/span>>\r\n               <span class <\/span>= \"sr-only\"<\/span>>Loading...<\/span>\r\n                \r\n              <\/div>\r\n            <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\u66f4\u6539Spinners\u5c3a\u5bf8<\/h3>\n
\n    \u6211\u4eec\u8fd8\u53ef\u4ee5\u6839\u636e\u9700\u8981\u66f4\u6539Spinners\u5c3a\u5bf8\u3002\u4ee5\u4e0bdiv\u7c7b\u7528\u4e8e\u66f4\u6539Spinners\u7684\u5927\u5c0f-\n  <\/div>\n
\n    1\u3001\u5c0f\u578bSpinners-\u6211\u4eec\u4f7f\u7528 .spinner-border-sm \u548c .spinner-grow-sm \u5236\u4f5c\u5c0f\u578bSpinners\u3002\n  <\/div>\n
\n    \u8bed\u6cd5:\n  <\/div>\n
\n
<!--for <\/span>small border spinner-->\r\n  <div class <\/span>= \"spinner-border spinner-border-sm\"<\/span> role = \"status\"<\/span><\/span>>\r\n    <span class <\/span>= \"sr-only\"<\/span><\/span>>Loading...<\/span>\r\n  <\/div>\r\n  <!--for <\/span>small grow border spinner-->\r\n  <div class <\/span>= \"spinner-grow spinner-grow-sm\"<\/span> role = \"status\">\r\n    <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n  <\/div><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u4ee3\u7801:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang = \"en\"<\/span>>\r\n<head>\r\n  <meta charset = \"UTF-8\"<\/span>>\r\n  <meta name = \"viewport\"<\/span> content = \"width=device-width, initial-scale=1.0\"<\/span>>\r\n  <title>Bootstrap Small Spinner Example<\/title>\r\n  <!--Bootstrap CDN-->\r\n  <link rel = \"stylesheet\"<\/span> href = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n  <style>\r\n    .jumbotron {\r\n      text-align: center;\r\n      margin: 20px;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div class <\/span>= \"container text-success\"<\/span>>\r\n    <div class <\/span>= \"jumbotron text-align-center\"<\/span>>\r\n      <h1> Small Spinner Example<\/h1>\r\n      <!--for <\/span>small border spinner-->\r\n      <div class <\/span>= \"spinner-border spinner-border-sm text-primary\"<\/span> role = \"status\"<\/span><\/span>>\r\n        <span class <\/span>= \"sr-only\"<\/span><\/span>>Loading...<\/span>\r\n      <\/div>\r\n      <!--for <\/span>small grow border spinner-->\r\n      <div class <\/span>= \"spinner-grow spinner-grow-sm text-warning\"<\/span> role = \"status\">\r\n        <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n      <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n    2\u3001\u5927\u578bSpinners-\u6211\u4eec\u4f7f\u7528 .spinner-border-lg \u548c .spinner-grow-lg \u7c7b\u521b\u5efa\u5927\u578bSpinners\u3002\n  <\/div>\n
\n    \u8bed\u6cd5:\n  <\/div>\n
\n
<!--for <\/span>Large border spinner-->\r\n      <div class <\/span>= \"spinner-border spinner-border-lg text-primary\"<\/span> role = \"status\"<\/span><\/span>>\r\n        <span class <\/span>= \"sr-only\"<\/span><\/span>>Loading...<\/span>\r\n      <\/div>\r\n      <!--for <\/span>Large grow border spinner-->\r\n      <div class <\/span>= \"spinner-grow spinner-grow-lg text-warning\"<\/span> role = \"status\">\r\n        <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n      <\/div><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u4ee3\u7801:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang = \"en\"<\/span>>\r\n<head>\r\n  <meta charset = \"UTF-8\"<\/span>>\r\n  <meta name = \"viewport\"<\/span> content = \"width=device-width, initial-scale=1.0\"<\/span>>\r\n  <title>Bootstrap Large Spinner Example<\/title>\r\n  <!--Bootstrap CDN-->\r\n  <link rel = \"stylesheet\"<\/span> href = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n  <style>\r\n    .jumbotron {\r\n      text-align: center;\r\n      margin: 20px;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div class <\/span>= \"container text-success\"<\/span>>\r\n    <div class <\/span>= \"jumbotron text-align-center\"<\/span>>\r\n      <h1> Large Spinner Example<\/h1>\r\n      <!--for <\/span>Large border spinner-->\r\n      <div class <\/span>= \"spinner-border spinner-border-lg text-primary\"<\/span> role = \"status\"<\/span><\/span>>\r\n        <span class <\/span>= \"sr-only\"<\/span><\/span>>Loading...<\/span>\r\n      <\/div>\r\n      <!--for <\/span>Large grow border spinner-->\r\n      <div class <\/span>= \"spinner-grow spinner-grow-lg text-warning\"<\/span> role = \"status\">\r\n        <span class <\/span>= \"sr-only\">Loading...<\/span>\r\n      <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
Bootstrap Spinners\u6309\u94ae<\/h3>\n
\n    \u5185\u90e8\u6309\u94aeSpinners\u6307\u793a\u5f53\u524d\u5904\u4e8e\u5904\u7406\u9636\u6bb5\u7684\u64cd\u4f5c\u3002\n  <\/div>\n
\n    \u8bed\u6cd5\n  <\/div>\n
\n
<!--Bootstrap grow Spinner Button-->\r\n      <button class <\/span>= \"btn btn-primary\"<\/span> type=\"button\"<\/span><\/span> disabled>\r\n        <span class <\/span>= \"spinner-grow spinner-grow-sm\"<\/span> role = \"status\"<\/span><\/span> aria-hidden = \"true\"<\/span><\/span>><\/span>\r\n        <span class <\/span>= \"sr-only\"<\/span>>Loading...<\/span>\r\n      <\/button>\r\n      <!--Bootstrap border Spinner Button-->\r\n      <button class <\/span>= \"btn btn-secondary\"<\/span> type=\"button\" disabled>\r\n        <span class <\/span>= \"spinner-border spinner-border-grow\"<\/span> role = \"status\" aria-hidden = \"true\"><\/span>\r\n        Loading...\r\n      <\/button><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u4ee3\u7801:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang = \"en\"<\/span>>\r\n<head>\r\n  <meta charset = \"UTF-8\"<\/span>>\r\n  <meta name = \"viewport\"<\/span> content = \"width=device-width, initial-scale=1.0\"<\/span>>\r\n  <title>Bootstrap Spinner Button Example<\/title>\r\n  <!--Bootstrap CDN-->\r\n  <link rel = \"stylesheet\"<\/span> href = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src = \"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n  <style>\r\n    .jumbotron {\r\n      text-align: center;\r\n      margin: 20px;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div class <\/span>= \"container text-success\"<\/span>>\r\n    <div class <\/span>= \"jumbotron text-align-center\"<\/span>>\r\n      <h1> Bootstrap Spinner Button Example<\/h1>\r\n      <!--Bootstrap grow Spinner Button-->\r\n      <button class <\/span>= \"btn btn-primary\"<\/span> type=\"button\"<\/span><\/span> disabled>\r\n        <span class <\/span>= \"spinner-grow spinner-grow-sm\"<\/span> role = \"status\"<\/span><\/span> aria-hidden = \"true\"<\/span><\/span>><\/span>\r\n        <span class <\/span>= \"sr-only\"<\/span>>Loading...<\/span>\r\n      <\/button>\r\n      <!--Bootstrap border Spinner Button-->\r\n      <button class <\/span>= \"btn btn-secondary\"<\/span> type=\"button\" disabled>\r\n        <span class <\/span>= \"spinner-border spinner-border-grow\"<\/span> role = \"status\" aria-hidden = \"true\"><\/span>\r\n        Loading...\r\n      <\/button>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
 <\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Bootstrap Spinnerszh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-2019","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2019"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=2019"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2019\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=2019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=2019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=2019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}