{"id":2000,"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\u8f93\u5165","status":"publish","type":"post","link":"https:\/\/bianchenghao6.com\/2000.html","title":{"rendered":"Bootstrap\u8f93\u5165"},"content":{"rendered":"


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

\n

Bootstrap\u8f93\u5165<\/h1>\n<\/p><\/div>\n

Bootstrap \u8f93\u5165<\/h2>\n
\n

Bootstrap \u8f93\u5165\u7c7b\u578b<\/h3>\n
\n \u8f93\u5165\u7c7b\u578b: \u590d\u9009\u6846\n <\/div>\n
\n \u8f93\u5165\u7c7b\u578b: \u5355\u9009\u6309\u94ae\n <\/div>\n
\n

Bootstrap\u590d\u9009\u6846<\/h3>\n
\n \u6b64\u590d\u9009\u6846\u53ef\u5e2e\u52a9\u60a8\u4ece\u5f53\u524d\u9009\u9879\u5217\u8868\u4e2d\u9009\u62e9\u4efb\u610f\u6570\u91cf\u7684\u9009\u9879\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 \r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n  <h2>Input type: checkbox<\/h2>\r\n  <form role=\"form\"<\/span>>\r\n    <div class=\"checkbox\"<\/span><\/span><\/span><\/span>>\r\n      <label><input type=\"checkbox\" value=\"\"<\/span><\/span>>Option 1<\/label>\r\n    <\/div>\r\n    <div class=\"checkbox\">\r\n      <label><input type=\"checkbox\" value=\"\">Option 2<\/label>\r\n  \r\n    <\/div>\r\n  <\/form>\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 \u5982\u679c\u5e0c\u671b\u590d\u9009\u6846\u663e\u793a\u5728\u540c\u4e00\u884c\u4e0a\uff0c\u8bf7\u4f7f\u7528 .checkbox-inline\u7c7b:\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  \r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n  <h2>Inline checkbox<\/h2>\r\n  <p>The following checkboxes appear in the same line :<\/p>\r\n  <form role=\"form\"<\/span>>\r\n    <label class=\"checkbox-inline\"<\/span><\/span>>\r\n      <input type=\"checkbox\"<\/span><\/span> value=\"\"<\/span><\/span>>Option 1\r\n    <\/label>\r\n    <label class=\"checkbox-inline\">\r\n      <input type=\"checkbox\" value=\"\">Option 2\r\n    <\/label>\r\n  <\/form>\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 \u5355\u9009\u6309\u94ae<\/h3>\n
\n \u5355\u9009\u6309\u94ae\u8fd8\u53ef\u4ee5\u5e2e\u52a9\u60a8\u4ece\u5f53\u524d\u9009\u9879\u5217\u8868\u4e2d\u9009\u62e9\u4efb\u610f\u6570\u91cf\u7684\u9009\u9879\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  \r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n  <h2>Input type: Radio buttons<\/h2>\r\n  \r\n  <form role=\"form\"<\/span>>\r\n    <div class=\"radio\"<\/span><\/span><\/span><\/span>>\r\n      <label><input type=\"radio\" name=\"optradio\"<\/span><\/span>>Option 1<\/label>\r\n    <\/div>\r\n    <div class=\"radio\">\r\n      <label><input type=\"radio\" name=\"optradio\">Option 2<\/label>\r\n    <\/div>\r\n  <\/form>\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 \u5982\u679c\u5e0c\u671b\u5355\u9009\u6309\u94ae\u51fa\u73b0\u5728\u540c\u4e00\u884c\u4e0a\uff0c\u8bf7\u4f7f\u7528 .radio-inline\u7c7b:\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  \r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n  <h2>Inline radio buttons<\/h2>\r\n  <p>The following radio boxes appear in the same line:<\/p>\r\n  <form role=\"form\"<\/span>>\r\n    <label class=\"radio-inline\"<\/span><\/span>>\r\n      <input type=\"radio\"<\/span><\/span> name=\"optradio\"<\/span><\/span>>Option 1\r\n    <\/label>\r\n    <label class=\"radio-inline\">\r\n      <input type=\"radio\" name=\"optradio\">Option 2\r\n    <\/label>\r\n  <\/form>\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\u8f93\u5165<\/h2>\n
\n Bootstrap 4\u652f\u6301\u4ee5\u4e0b\u7c7b\u578b\u7684\u8868\u5355\u63a7\u4ef6:\n <\/div>\n

input<\/span>
\n textarea <\/span>
\n checkbox<\/span>
\n radio<\/span>
\n select<\/span> <\/p>\n

Bootstrap\u8f93\u5165<\/h2>\n
\n Bootstrap\u652f\u6301\u6240\u6709HTML5\u8f93\u5165\u7c7b\u578b: \u6587\u672c\uff0c\u5bc6\u7801\uff0c\u65e5\u671f\u65f6\u95f4\uff0c\u672c\u5730\u65e5\u671f\u65f6\u95f4\uff0c\u65e5\u671f\uff0c\u6708\u4efd\uff0c\u65f6\u95f4\uff0c\u661f\u671f\uff0c\u6570\u5b57\uff0c\u7535\u5b50\u90ae\u4ef6\uff0c\u7f51\u5740\uff0c\u641c\u7d22\uff0c\u7535\u8bdd\u548c\u989c\u8272\u3002\n <\/div>\n
\n \u6ce8\u610f: <\/span>\u5982\u679c\u8f93\u5165\u7684\u7c7b\u578b\u672a\u6b63\u786e\u58f0\u660e\uff0c\u5219\u8f93\u5165\u7684\u6837\u5f0f\u5c06\u4e0d\u5b8c\u5168!\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>Form control: input example<\/h2>\r\n  <form>\r\n    <div class=\"form-group\"<\/span><\/span>>\r\n      <label for=\"usr\"<\/span><\/span>>Name:<\/label>\r\n      <input type=\"text\"<\/span> class=\"form-control\"<\/span><\/span> id=\"usr\">\r\n    <\/div>\r\n    <div class=\"form-group\">\r\n      <label for=\"pwd\"<\/span><\/span>>Password:<\/label>\r\n      <input type=\"password\"<\/span> class=\"form-control\" id=\"pwd\">\r\n    <\/div>\r\n  <\/form>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n

<\/code>\n <\/div>\n


\n

Bootstrap\u6587\u672c\u533a\u57df<\/h2>\n
\n \u4f7f\u7528\u5e26\u6709\" form-control\"\u7684\u6587\u672c\u533a\u57df\u6765\u521b\u5efaBootstrap\u6587\u672c\u533a\u57df\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>Form control: textarea<\/h2>\r\n  <p>The form below contains a textarea for <\/span>comments:<\/p>\r\n  <form>\r\n    <div class=\"form-group\"<\/span>>\r\n      <label for=\"comment\"<\/span><\/span>>Comment:<\/label>\r\n      <textarea class=\"form-control\"<\/span> rows=\"5\"<\/span> id=\"comment\"><\/textarea>\r\n    <\/div>\r\n  <\/form>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n

<\/code>\n <\/div>\n


\n

Bootstrap \u9009\u62e9\u5217\u8868<\/h2>\n
\n Bootstrap \u9009\u62e9\u5217\u8868\u7528\u4e8e\u9009\u62e9\u5355\u4e2a\u6216\u591a\u4e2a\u5217\u8868\u3002\u5982\u679c\u8981\u5141\u8bb8\u7528\u6237\u4ece\u591a\u4e2a\u9009\u9879\u4e2d\u8fdb\u884c\u9009\u62e9\uff0c\u5219\u4f7f\u7528\u9009\u62e9\u5217\u8868\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>Form control: select<\/h2>\r\n  <p>The form below contains two dropdown menus (select lists):<\/p>\r\n  <form>\r\n    <div class=\"form-group\"<\/span>>\r\n      <label for=\"sel1\"<\/span><\/span>>Select list (select one):<\/label>\r\n      <select class=\"form-control\"<\/span><\/span> id=\"sel1\">\r\n        <option>1<\/option>\r\n        <option>2<\/option>\r\n        <option>3<\/option>\r\n        <option>4<\/option>\r\n      <\/select>\r\n      <br>\r\n      <label for=\"sel2\"<\/span><\/span>>Mutiple select list (hold shift to select more than one):<\/label>\r\n      <select multiple class=\"form-control\" id=\"sel2\">\r\n        <option>1<\/option>\r\n        <option>2<\/option>\r\n        <option>3<\/option>\r\n        <option>4<\/option>\r\n        <option>5<\/option>\r\n      <\/select>\r\n    <\/div>\r\n  <\/form>\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\u8f93\u5165zh-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-2000","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2000"}],"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=2000"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2000\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=2000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=2000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=2000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}