{"id":1994,"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 \u8fdb\u5ea6\u6761","status":"publish","type":"post","link":"https:\/\/bianchenghao6.com\/1994.html","title":{"rendered":"Bootstrap \u8fdb\u5ea6\u6761"},"content":{"rendered":"
\n
<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n <title>Bootstrap Progress bar<\/title>\r\n <meta charset=\"utf-8\"<\/span>>\r\n <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n \r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>default <\/span>Progress Bar<\/h2>\r\n <div class=\"progress\"<\/span>>\r\n <div class=\"progress-bar\"<\/span> role=\"progressbar\"<\/span> aria-valuenow=\"70\"<\/span> aria-valuemin=\"0\"<\/span> aria-valuemax=\"100\"<\/span> style=\"width:70%\"<\/span>>\r\n <span class=\"sr-only\"<\/span>>70% Complete<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.0\/jquery.min.js\"<\/span>><\/script>\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n Bootstrap 4\u57fa\u672c\u8fdb\u5ea6\u6761<\/h3>\n\n \u8fdb\u5ea6\u6761\u7528\u4e8e\u5411\u7528\u6237\u663e\u793a\u4ed6\/\u5979\u5728\u8fdb\u7a0b\u4e2d\u5f85\u4e86\u591a\u957f\u65f6\u95f4\u3002\u8981\u521b\u5efa\u521b\u5efa\u9ed8\u8ba4\u7684\u8fdb\u5ea6\u6761\uff0c\u8bf7\u5c06.progress\u7c7b\u6dfb\u52a0\u5230\u5bb9\u5668\u5143\u7d20\uff0c\u5e76\u5c06\u8fdb\u5ea6\u6761\u7c7b\u6dfb\u52a0\u5230\u5176\u5b50\u5143\u7d20\u3002\u4f7f\u7528CSS width\u5c5e\u6027\u8bbe\u7f6e\u8fdb\u5ea6\u6761\u7684\u5bbd\u5ea6\u3002\n <\/div>\n\u793a\u4f8b<\/h3>\n\n<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n <title>Bootstrap Example<\/title>\r\n <meta charset=\"utf-8\"<\/span>>\r\n <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/css\/bootstrap.min.css\"<\/span>>\r\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.6\/umd\/popper.min.js\"<\/span>><\/script>\r\n <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>Progress Bar With Label<\/h2>\r\n <div class=\"progress\"<\/span>>\r\n <div class=\"progress-bar\"<\/span> style=\"width:70%\"<\/span>>70%<\/div>\r\n <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n\u5e26\u6709\u6807\u7b7e\u7684Bootstrap \u8fdb\u5ea6\u6761<\/h3>\n\n \u5e26\u6709\u6807\u7b7e\u7684\u8fdb\u5ea6\u6761\u6307\u5b9a\u4e86\u7279\u5b9a\u8fdb\u7a0b\u7684\u8fdb\u5ea6\u767e\u5206\u6bd4\u3002\n <\/div>\n\n \u60a8\u5fc5\u987b\u4ece\u8fdb\u5ea6\u680f\u4e2d\u5220\u9664\u4ec5.sr\u7c7b\uff0c\u4ee5\u663e\u793a\u53ef\u89c1\u7684\u767e\u5206\u6bd4\u3002\n <\/div>\n\n \u8bf7\u53c2\u89c1\u4ee5\u4e0b\u793a\u4f8b:\n <\/div>\n\n<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n <title>Bootstrap Example<\/title>\r\n <meta charset=\"utf-8\"<\/span>>\r\n <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>Progress Bar With Label<\/h2>\r\n <div class=\"progress\"<\/span>>\r\n <div class=\"progress-bar\"<\/span> role=\"progressbar\"<\/span> \r\n aria-valuenow=\"76\"<\/span> aria-valuemin=\"0\"<\/span> aria-valuemax=\"100\"<\/span> style=\"width:76%\"<\/span>>\r\n 76%\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.0\/jquery.min.js\"<\/span>><\/script>\r\n <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\nBootstrap \u5f69\u8272\u8fdb\u5ea6\u6761<\/h3>\n\n \u60a8\u53ef\u4ee5\u4f7f\u7528\u4e0a\u4e0b\u6587\u7c7b\u6765\u521b\u5efa\u5f69\u8272\u8fdb\u5ea6\u6761\u3002\n <\/div>\n\n \u7528\u4e8e\u521b\u5efa\u5f69\u8272\u8fdb\u5ea6\u6761\u7684\u4e0a\u4e0b\u6587\u7c7b\u9152\u5427:\n <\/div>\n .progress-bar-success <\/span>
\n .progress-bar-info <\/span>
\n .progress-bar-warning <\/span>
\n .progress-bar-danger <\/span> <\/p>\n\n <!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n <title>Bootstrap Example<\/title>\r\n <meta charset=\"utf-8\"<\/span>>\r\n <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n \r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>Colored Progress Bars<\/h2>\r\n <p>The contextual classes colors the progress bars:<\/p> \r\n <div class=\"progress\"<\/span><\/span><\/span><\/span>>\r\n <div class=\"progress-bar progress-bar-success\"<\/span> \r\n role=\"progressbar\"<\/span><\/span><\/span><\/span> aria-valuenow=\"40\"<\/span> aria-valuemin=\"0\"<\/span><\/span><\/span><\/span> aria-valuemax=\"100\"<\/span><\/span><\/span><\/span> style=\"width:40%\"<\/span>>\r\n 40% Complete (success)\r\n <\/div>\r\n <\/div>\r\n <div class=\"progress\">\r\n <div class=\"progress-bar progress-bar-info\"<\/span> \r\n ole=\"progressbar\" aria-valuenow=\"50\"<\/span> aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:50%\"<\/span>>\r\n 50% Complete (info)\r\n <\/div>\r\n <\/div>\r\n <div class=\"progress\">\r\n <div class=\"progress-bar progress-bar-warning\"<\/span> \r\n role=\"progressbar\" aria-valuenow=\"60\"<\/span> aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:60%\"<\/span>>\r\n 60% Complete (warning)\r\n <\/div>\r\n <\/div>\r\n <div class=\"progress\">\r\n <div class=\"progress-bar progress-bar-danger\"<\/span> \r\n role=\"progressbar\" aria-valuenow=\"70\"<\/span> aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:70%\"<\/span>>\r\n 70% Complete (danger)\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.0\/jquery.min.js\"<\/span>><\/script>\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\nBootstrap\u5265\u79bb\u7684\u8fdb\u5ea6\u6761<\/h3>\n\n \u60a8\u53ef\u4ee5\u4f7f\u7528 class.progress-bar-striped \u6765\u521b\u5efa\u5265\u79bb\u7684\u8fdb\u5ea6\u6761\u3002\n <\/div>\n\n <!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n <title>Bootstrap Example<\/title>\r\n <meta charset=\"utf-8\"<\/span>>\r\n <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n \r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>Striped Progress Bars<\/h2>\r\n <p>The .progress-bar-striped class <\/span>adds stripes to the progress bars:<\/p> \r\n <div class=\"progress\"<\/span><\/span><\/span><\/span>>\r\n <div class=\"progress-bar progress-bar-success progress-bar-striped\"<\/span> \r\n role=\"progressbar\"<\/span><\/span><\/span><\/span> aria-valuenow=\"40\"<\/span> aria-valuemin=\"0\"<\/span><\/span><\/span><\/span> aria-valuemax=\"100\"<\/span><\/span><\/span><\/span> style=\"width:40%\"<\/span>>\r\n 40% Complete (success)\r\n <\/div>\r\n <\/div>\r\n <div class=\"progress\">\r\n <div class=\"progress-bar progress-bar-info progress-bar-striped\"<\/span> \r\n role=\"progressbar\" aria-valuenow=\"50\"<\/span> aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:50%\"<\/span>>\r\n 50% Complete (info)\r\n <\/div>\r\n <\/div>\r\n <div class=\"progress\">\r\n <div class=\"progress-bar progress-bar-warning progress-bar-striped\"<\/span> \r\n role=\"progressbar\" aria-valuenow=\"60\"<\/span> aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:60%\"<\/span>>\r\n 60% Complete (warning)\r\n <\/div>\r\n <\/div>\r\n <div class=\"progress\">\r\n <div class=\"progress-bar progress-bar-danger progress-bar-striped\"<\/span> \r\n role=\"progressbar\" aria-valuenow=\"70\"<\/span> aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:70%\"<\/span>>\r\n 70% Complete (danger)\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.0\/jquery.min.js\"<\/span>><\/script>\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n Bootstrap\u52a8\u753b\u8fdb\u5ea6\u6761<\/h3>\n\n \u60a8\u5fc5\u987b\u4f7f\u7528 class .active \u6765\u521b\u5efa\u52a8\u753b\u8fdb\u5ea6\u6761\u3002\n <\/div>\n\n<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n <title>Bootstrap Example<\/title>\r\n <meta charset=\"utf-8\"<\/span>>\r\n <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n \r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>Animated Progress Bar<\/h2>\r\n <p>The .active class <\/span>animates the progress bar:<\/p> \r\n <div class=\"progress\"<\/span>>\r\n <div class=\"progress-bar progress-bar-striped active\"<\/span> \r\n role=\"progressbar\"<\/span> aria-valuenow=\"70\"<\/span> aria-valuemin=\"0\"<\/span> aria-valuemax=\"100\"<\/span> style=\"width:70%\"<\/span>>\r\n 70%\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.0\/jquery.min.js\"<\/span>><\/script>\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n Bootstrap\u5806\u79ef\u8fdb\u5ea6\u6761(\u5f69\u8272\u8fdb\u5ea6\u6761)<\/h3>\n\n \u60a8\u53ef\u4ee5\u901a\u8fc7\u5c06\u591a\u4e2a\u6761\u653e\u7f6e\u5728\u540c\u4e00<div class=\"progress\">\u4e2d\u6765\u521b\u5efa\u5806\u79ef\u8fdb\u5ea6\u6761\n <\/div>\n\n <!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n <title>Bootstrap Example<\/title>\r\n <meta charset=\"utf-8\"<\/span>>\r\n <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n \r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>Stacked Progress Bars<\/h2>\r\n <p>Create a stacked progress bar by placing multiple bars into the same div with class <\/span>.progress:<\/p> \r\n <div class=\"progress\"<\/span>>\r\n <div class=\"progress-bar progress-bar-success\"<\/span> \r\n role=\"progressbar\"<\/span><\/span><\/span> style=\"width:40%\"<\/span>>\r\n Free Space\r\n <\/div>\r\n <div class=\"progress-bar progress-bar-warning\"<\/span> \r\n role=\"progressbar\" style=\"width:10%\"<\/span>>\r\n Warning\r\n <\/div>\r\n <div class=\"progress-bar progress-bar-danger\"<\/span> \r\n role=\"progressbar\" style=\"width:20%\"<\/span>>\r\n Danger\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.0\/jquery.min.js\"<\/span>><\/script>\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n\n \u6ce8\u610f: <\/span> Bootstrap 4\u4e2d\u6dfb\u52a0\u4e86\u4e24\u79cd\u65b0\u7684\u5f69\u8272\u8fdb\u5ea6\u6761:\n <\/div>\n .progress-bar-white <\/span>
\n .progress-bar-secondary <\/span>
\n .progress-bar-light <\/span>
\n .progress-bar-dark <\/span> <\/p>\n\u793a\u4f8b: <\/h3>\n\n<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n <title>Bootstrap Example<\/title>\r\n <meta charset=\"utf-8\"<\/span>>\r\n <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/css\/bootstrap.min.css\"<\/span>>\r\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.6\/umd\/popper.min.js\"<\/span>><\/script>\r\n <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>Colored Progress Bars Example<\/h2>\r\n <!--Blue-->\r\n <div class=\"progress\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span>>\r\n <div class=\"progress-bar\"<\/span> style=\"width:10%\"<\/span>><\/div>\r\n <\/div><br>\r\n <!--Green-->\r\n <div class=\"progress\">\r\n <div class=\"progress-bar bg-success\"<\/span> style=\"width:20%\"<\/span>><\/div>\r\n <\/div><br>\r\n <!--Turquoise-->\r\n <div class=\"progress\">\r\n <div class=\"progress-bar bg-info\"<\/span> style=\"width:30%\"<\/span>><\/div>\r\n <\/div><br>\r\n <!--Orange-->\r\n <div class=\"progress\">\r\n <div class=\"progress-bar bg-warning\"<\/span> style=\"width:40%\"<\/span>><\/div>\r\n <\/div><br>\r\n <!--Red-->\r\n <div class=\"progress\">\r\n <div class=\"progress-bar bg-danger\"<\/span> style=\"width:50%\"<\/span>><\/div>\r\n <\/div><br>\r\n <!--White-->\r\n <div class=\"progress border\"<\/span><\/span>>\r\n <div class=