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


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

\n

Bootstrap \u8868\u5355<\/h1>\n<\/p><\/div>\n

Bootstrap Forms<\/h2>\n
\n \u5728Bootstrap\u4e2d\uff0c\u5b58\u5728\u4e09\u79cd\u7c7b\u578b\u7684\u8868\u5355\u5e03\u5c40:\n <\/div>\n

\u5782\u76f4\u5f62\u5f0f(\u8fd9\u662f\u9ed8\u8ba4\u8bbe\u7f6e)<\/span>
\n \u6c34\u5e73\u5f62\u5f0f<\/span>
\n \u5185\u8054\u8868\u683c<\/span> <\/p>\n

\n

Bootstrap\u8868\u5355\u89c4\u5219<\/h2>\n
\n \u8fd93\u79cd\u8868\u5355\u5e03\u5c40\u6709\u4e09\u4e2a\u6807\u51c6\u89c4\u5219:\n <\/div>\n

\u59cb\u7ec8\u4f7f\u7528<form role=\"form\">(\u6709\u52a9\u4e8e\u63d0\u9ad8\u4f7f\u7528\u5c4f\u5e55\u9605\u8bfb\u5668\u7684\u7528\u6237\u7684\u53ef\u8bbf\u95ee\u6027)<\/span>
\n \u5c06\u6807\u7b7e\u548c\u8868\u5355\u63a7\u4ef6\u5305\u88c5\u5728<div class=\"form-group\">\u4e2d(\u9700\u8981\u6700\u4f73\u95f4\u8ddd)<\/span>
\n \u5c06.form-control\u7c7b\u6dfb\u52a0\u5230\u6240\u6709\u6587\u672c<input>\uff0c<textarea>\u548c<select>\u5143\u7d20<\/span> <\/p>\n

\n

1)Bootstrap \u5782\u76f4\u683c\u5f0f(\u9ed8\u8ba4)<\/h3>\n
\n
   <!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n  <head>\r\n     <title>Bootstrap example<\/title>\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  <h1>Vertical Form Example<\/h1>\r\n<form style=\"width:300px\"<\/span>>\r\n  <div class=\"form-group\"<\/span><\/span>>\r\n    <label for=\"exampleInputEmail1\"<\/span><\/span>>Email address<\/label>\r\n    <input type=\"email\"<\/span> class=\"form-control\"<\/span><\/span> id=\"exampleInputEmail1\" placeholder=\"Email\"<\/span>>\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label for=\"exampleInputPassword1\"<\/span><\/span>>Password<\/label>\r\n    <input type=\"password\"<\/span> class=\"form-control\" id=\"exampleInputPassword1\" placeholder=\"Password\"<\/span>>\r\n  <\/div>\r\n  \r\n  <button type=\"submit\"<\/span> class=\"btn btn-default\"<\/span>>Login<\/button>\r\n<\/form>\r\n<\/div>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"<\/span>><\/script>\r\n  <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
 2)Bootstrap\u5185\u8054\u8868\u5355<\/h3>\n
\n    \u5728Bootstrap\u5185\u8054\u8868\u5355\u4e2d\uff0c\u6240\u6709\u5143\u7d20\u90fd\u662f\u5185\u8054\u7684\uff0c\u5de6\u5bf9\u9f50\uff0c\u5e76\u4e14\u6807\u7b7e\u5728\u65c1\u8fb9\u3002\n  <\/div>\n
\n    \u6b64\u793a\u4f8b\u4ec5\u9002\u7528\u4e8e\u89c6\u53e3\u5185\u5bbd\u5ea6\u81f3\u5c11\u4e3a768px\u7684\u8868\u5355!\n  <\/div>\n
\n    \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 form Example<\/h2>\r\n  <form class=\"form-inline\"<\/span> role=\"form\"<\/span>>\r\n    <form style=\"width:300px\"<\/span>>\r\n  <div class=\"form-group\"<\/span><\/span>>\r\n    <label for=\"exampleInputEmail1\"<\/span><\/span>>Email address<\/label>\r\n    <input type=\"email\"<\/span> class=\"form-control\"<\/span><\/span> id=\"exampleInputEmail1\" placeholder=\"Email\"<\/span>>\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label for=\"exampleInputPassword1\"<\/span><\/span>>Password<\/label>\r\n    <input type=\"password\"<\/span> class=\"form-control\" id=\"exampleInputPassword1\" placeholder=\"Password\"<\/span>>\r\n  <\/div>\r\n  \r\n  <button type=\"submit\"<\/span> class=\"btn btn-default\"<\/span>>Login<\/button>\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
 3)Bootstrap\u6c34\u5e73\u8868\u683c<\/h3>\n
\n    \u5982\u679c\u8981\u521b\u5efa\u6c34\u5e73\u8868\u683c\uff0c\u5219\u5fc5\u987b\u6dfb\u52a0\u4e00\u4e9b\u5176\u4ed6\u89c4\u5219\u3002\n  <\/div>\n
\n    \u5176\u4ed6\u6c34\u5e73\u5f62\u5f0f\u7684\u89c4\u5219:\n  <\/div>\n
  \u5c06.form-horizo\u200b\u200bntal\u7c7b\u6dfb\u52a0\u5230<form>\u5143\u7d20<\/span>
\n  \u5c06.control-label\u7c7b\u6dfb\u52a0\u5230\u6240\u6709<label>\u5143\u7d20<\/span> <\/p>\n
\n    \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>Horizontal form Example<\/h2>\r\n  <form class=\"form-horizontal\"<\/span> role=\"form\"<\/span>>\r\n    <form style=\"width:300px\"<\/span>>\r\n  <div class=\"form-group\"<\/span><\/span><\/span>>\r\n      <label class=\"control-label col-sm-2\"<\/span><\/span> for=\"email\"<\/span><\/span><\/span>>Email:<\/label>\r\n      <div class=\"col-sm-10\"<\/span><\/span>>\r\n        <input type=\"email\" class=\"form-control\"<\/span><\/span> id=\"email\" placeholder=\"Enter email\"<\/span>>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"form-group\">\r\n      <label class=\"control-label col-sm-2\" for=\"pwd\"<\/span><\/span>>Password:<\/label>\r\n      <div class=\"col-sm-10\">          \r\n        <input type=\"password\"<\/span> class=\"form-control\" id=\"pwd\" placeholder=\"Enter password\"<\/span>>\r\n      <\/div>\r\n    <\/div>\r\n  \r\n  <div class=\"form-group\">        \r\n      <div class=\"col-sm-offset-2 col-sm-10\"<\/span>>\r\n        <button type=\"submit\"<\/span> class=\"btn btn-default\"<\/span>>Submit<\/button>\r\n      <\/div>\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
 Bootstrap 4\u8868\u5355<\/h2>\n
\n    \u5728Bootstrap4\u4e2d\uff0c\u8868\u5355\u63a7\u4ef6\u4f1a\u901a\u8fc7Bootstrap\u81ea\u52a8\u63a5\u6536\u67d0\u4e9b\u5168\u5c40\u6837\u5f0f\u3002\n  <\/div>\n
\n    .form-control\u7c7b\u7684\u6240\u6709\u6587\u672c<input>\uff0c<textarea>\u548c<select>\u5143\u7d20\u7684\u5bbd\u5ea6\u5747\u4e3a100\uff05\u3002\n  <\/div>\n
\u5806\u53e0(\u5168\u89d2)\u5f62\u5f0f: <\/h2>\n
\n    Bootstrap 4\u63d0\u4f9b\u4e86\u5168\u89d2\u5806\u53e0\u5f62\u5f0f\u3002\n  <\/div>\n
\u793a\u4f8b: <\/h3>\n
\n    \u8ba9\u6211\u4eec\u4ee5\u521b\u5efa\u5177\u6709\u4e24\u4e2a\u8f93\u5165\u5b57\u6bb5\uff0c\u4e00\u4e2a\u590d\u9009\u6846\u548c\u4e00\u4e2a\u63d0\u4ea4\u6309\u94ae\u7684\u5806\u53e0\u5f62\u5f0f\u4e3a\u4f8b\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\/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>Stacked form<\/h2>\r\n  <form>\r\n    <div class=\"form-group\"<\/span><\/span>>\r\n      <label for=\"email\"<\/span><\/span><\/span>>Email:<\/label>\r\n      <input type=\"email\" class=\"form-control\"<\/span><\/span> id=\"email\" placeholder=\"Enter email\"<\/span>>\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\" placeholder=\"Enter password\"<\/span>>\r\n    <\/div>\r\n    <div class=\"form-check\"<\/span>>\r\n      <label class=\"form-check-label\"<\/span>>\r\n        <input class=\"form-check-input\"<\/span> type=\"checkbox\"<\/span>> Remember me\r\n      <\/label>\r\n    <\/div>\r\n    <button type=\"submit\"<\/span> class=\"btn btn-primary\"<\/span>>Submit<\/button>\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 \u8868\u5355zh-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-1984","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1984"}],"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=1984"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1984\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}