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


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

\n

Bootstrap \u5bfc\u822a<\/h1>\n<\/p><\/div>\n

Bootstrap \u6807\u7b7e<\/h2>\n
\n

Bootstrap \u83dc\u5355<\/h3>\n
\n \u5927\u591a\u6570\u7f51\u9875\u4e2d\u90fd\u4f7f\u7528\u83dc\u5355\u3002\u8fd9\u4e9b\u5728\u65e0\u5e8f\u5217\u8868\u4e2d\u5b9a\u4e49\u3002\u60a8\u5fc5\u987b\u5c06 .list-inline\u7c7b\u6dfb\u52a0\u5230\u624d\u80fd\u521b\u5efa\u6c34\u5e73\u83dc\u5355\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 Case<\/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=\"http:\/\/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  <h3>Inline List<\/h3>\r\n  <ul class=\"list-inline\"<\/span>>\r\n    <li><a href=\"#\"<\/span><\/span><\/span><\/span>>Home<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 1<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 2<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 3<\/a><\/li><\/span>\r\n  <\/ul>\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=\"http:\/\/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 \u6807\u7b7e<\/h3>\n
\n    \u60a8\u53ef\u4ee5\u4f7f\u7528 \u521b\u5efa\u57fa\u672c\u7684\u5bfc\u822a\u6807\u7b7e\u3002\u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528 <\/p>\n
  •  \u6807\u8bb0\u5f53\u524d\u9875\u9762\u3002<\/li><\/div>\n
    \n    \u4ee5\u4e0b\u793a\u4f8b\u6307\u5b9a\u4e86\u5982\u4f55\u521b\u5efa\u7b80\u5355\u7684\u5bfc\u822a\u9009\u9879\u5361\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 Case<\/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=\"http:\/\/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  <h3>Tabs<\/h3>\r\n  <ul class=\"nav nav-tabs\"<\/span>>\r\n    <li class=\"active\"<\/span>><a href=\"#\"<\/span><\/span><\/span><\/span>>Home<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 1<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 2<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 3<\/a><\/li><\/span>\r\n  <\/ul>\r\n  <br>\r\n  \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=\"http:\/\/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
    \u5e26\u6709\u4e0b\u62c9\u83dc\u5355\u7684Bootstrap \u9009\u9879\u5361<\/h3>\n
    \n    \u60a8\u8fd8\u53ef\u4ee5\u5728\u4e0b\u62c9\u83dc\u5355\u4e2d\u4f7f\u7528\u9009\u9879\u5361\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 Case<\/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=\"http:\/\/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  <h3>Tabs With Dropdown Menu<\/h3>\r\n  <ul class=\"nav nav-tabs\"<\/span>>\r\n    <li class=\"active\"<\/span>><a href=\"#\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span>>Home<\/a><\/li><\/span>\r\n    <li class=\"dropdown\"<\/span><\/span>>\r\n      <a class=\"dropdown-toggle\"<\/span> data-toggle=\"dropdown\" href=\"#\">Menu 1 <span class=\"caret\"<\/span>><\/span><\/a><\/span>\r\n      <ul class=\"dropdown-menu\"<\/span>>\r\n        <li><a href=\"#\">Submenu 1-1<\/a><\/li><\/span>\r\n        <li><a href=\"#\">Submenu 1-2<\/a><\/li><\/span>\r\n        <li><a href=\"#\">Submenu 1-3<\/a><\/li>                        <\/span>\r\n      <\/ul>\r\n    <\/li>\r\n    <li><a href=\"#\">Menu 2<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 3<\/a><\/li><\/span>\r\n  <\/ul>\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=\"http:\/\/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 \u53ef\u5207\u6362\/\u52a8\u6001\u9009\u9879\u5361<\/h3>\n
    \n    \u5411\u6bcf\u4e2a\u94fe\u63a5\u6dfb\u52a0 data-toggle =\"tab\" \u5c5e\u6027\u3002\u7136\u540e\u4e3a\u6bcf\u4e2a\u6807\u7b7e\u6dfb\u52a0\u4e00\u4e2a\u5177\u6709\u552f\u4e00ID\u7684 .tab\u7a97\u683c\u7c7b\uff0c\u5e76\u5c06\u5176\u5305\u88c5\u5728\u5177\u6709 class .tab-content \u7684<div>\u5143\u7d20\u4e2d\uff0c\u4ee5\u4f7f\u6807\u7b7e\u53ef\u5207\u6362\u3002\n  <\/div>\n
    \n    \u5982\u679c\u60a8\u5e0c\u671b\u6807\u7b7e\u5728\u5355\u51fb\u65f6\u6de1\u5165\u548c\u6de1\u51fa\uff0c\u8bf7\u5728 .tab\u7a97\u683c\u4e2d\u6dfb\u52a0 .fade\u7c7b\u3002\n  <\/div>\n
    \n    \u67e5\u770b\u6b64\u793a\u4f8b:\n  <\/div>\n
    \n
    <!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n  <title>Bootstrap Case<\/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=\"http:\/\/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>Dynamic Tabs<\/h2>\r\n  <ul class=\"nav nav-tabs\"<\/span>>\r\n    <li class=\"active\"<\/span>><a data-toggle=\"tab\"<\/span><\/span><\/span><\/span> href=\"#home\"<\/span>>Home<\/a><\/li><\/span>\r\n    <li><a data-toggle=\"tab\" href=\"#menu1\"<\/span>>Menu 1<\/a><\/li><\/span>\r\n    <li><a data-toggle=\"tab\" href=\"#menu2\"<\/span>>Menu 2<\/a><\/li><\/span>\r\n    <li><a data-toggle=\"tab\" href=\"#menu3\"<\/span>>Menu 3<\/a><\/li><\/span>\r\n  <\/ul>\r\n  <div class=\"tab-content\"<\/span>>\r\n    <div id=\"home\"<\/span> class=\"tab-pane fade in active\"<\/span>>\r\n      <h3>HOME<\/h3>\r\n      <p>A markup language is a programming language that is used make text more \r\n           interactive and dynamic. It can turn a text into images, tables, links etc.<\/p>\r\n    <\/div>\r\n    <div id=\"menu1\"<\/span> class=\"tab-pane fade\"<\/span><\/span><\/span>>\r\n      <h3>Menu 1<\/h3>\r\n      <p>Java is a high level, robust, secured and object-oriented programming language.<\/p>\r\n    <\/div>\r\n    <div id=\"menu2\"<\/span> class=\"tab-pane fade\">\r\n      <h3>Menu 2<\/h3>\r\n      <p>SQL is just a query language, it is not a database. To perform SQL queries, \r\n     you need to install any database for <\/span>example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.<\/p>\r\n    <\/div>\r\n    <div id=\"menu3\"<\/span> class=\"tab-pane fade\">\r\n      <h3>Menu 3<\/h3>\r\n      <p>The C Language is developed for <\/span>creating system applications that direct \r\n      interacts to the hardware devices such as drivers, kernals etc.<\/p>\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=\"http:\/\/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 \u5bfc\u822a<\/h3>\n
    \n    \u60a8\u53ef\u4ee5\u4f7f\u7528 \u521b\u5efa\u5bfc\u822a\u3002\u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528\u6807\u8bb0\u5f53\u524d\u9875\u9762\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 Case<\/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=\"http:\/\/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  <h3>Pills<\/h3>\r\n  <ul class=\"nav nav-pills\"<\/span>>\r\n    <li class=\"active\"<\/span>><a href=\"#\"<\/span><\/span><\/span><\/span>>Home<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 1<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 2<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 3<\/a><\/li><\/span>\r\n  <\/ul>\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=\"http:\/\/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 \u5782\u76f4\u5bfc\u822a<\/h3>\n
    \n    \u6dfb\u52a0 .nav\u5806\u53e0\u7684\u7c7b\u4ee5\u5782\u76f4\u663e\u793a\u5bfc\u822a\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 Case<\/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=\"http:\/\/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  <h3>Vertical Pills<\/h3>\r\n  <ul class=\"nav nav-pills nav-stacked\"<\/span>>\r\n    <li class=\"active\"<\/span>><a href=\"#\"<\/span><\/span><\/span><\/span>>Home<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 1<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 2<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 3<\/a><\/li><\/span>\r\n  <\/ul>\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=\"http:\/\/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
    \u5e26\u6709\u4e0b\u62c9\u83dc\u5355\u7684Bootstrap\u5bfc\u822a<\/h3>\n
    \n    \u60a8\u8fd8\u53ef\u4ee5\u5c06\u4e0b\u62c9\u83dc\u5355\u4e0e\u5bfc\u822a\u4e00\u8d77\u4f7f\u7528\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 Case<\/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=\"http:\/\/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  <h3>Pills With Dropdown Menu<\/h3>\r\n  <ul class=\"nav nav-pills nav-stacked\"<\/span>>\r\n    <li class=\"active\"<\/span>><a href=\"#\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span>>Home<\/a><\/li><\/span>\r\n    <li class=\"dropdown\"<\/span><\/span>>\r\n      <a class=\"dropdown-toggle\"<\/span> data-toggle=\"dropdown\" href=\"#\">Menu 1 <span class=\"caret\"<\/span>><\/span><\/a><\/span>\r\n      <ul class=\"dropdown-menu\"<\/span>>\r\n        <li><a href=\"#\">Submenu 1-1<\/a><\/li><\/span>\r\n        <li><a href=\"#\">Submenu 1-2<\/a><\/li><\/span>\r\n        <li><a href=\"#\">Submenu 1-3<\/a><\/li>                        <\/span>\r\n      <\/ul>\r\n    <\/li>\r\n    <li><a href=\"#\">Menu 2<\/a><\/li><\/span>\r\n    <li><a href=\"#\">Menu 3<\/a><\/li><\/span>\r\n  <\/ul>\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=\"http:\/\/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\u53ef\u5207\u6362\u52a8\u6001\u5bfc\u822a<\/h3>\n
    \n    \u4e0e\u53ef\u5207\u6362\u52a8\u6001\u6807\u7b7e\u76f8\u540c\uff0c\u552f\u4e00\u7684\u53d8\u5316\u662f\u5c06 data-toggle \u5c5e\u6027\u8bbe\u7f6e\u4e3a data-toggle =\"pill\" \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 Case<\/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=\"http:\/\/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>Dynamic Pills<\/h2>\r\n  <ul class=\"nav nav-pills\"<\/span>>\r\n    <li class=\"active\"<\/span>><a data-toggle=\"pill\"<\/span><\/span><\/span><\/span> href=\"#home\"<\/span>>Home<\/a><\/li><\/span>\r\n    <li><a data-toggle=\"pill\" href=\"#menu1\"<\/span>>Menu 1<\/a><\/li><\/span>\r\n    <li><a data-toggle=\"pill\" href=\"#menu2\"<\/span>>Menu 2<\/a><\/li><\/span>\r\n    <li><a data-toggle=\"pill\" href=\"#menu3\"<\/span>>Menu 3<\/a><\/li><\/span>\r\n  <\/ul>\r\n  \r\n  <div class=\"tab-content\"<\/span>>\r\n    <div id=\"home\"<\/span> class=\"tab-pane fade in active\"<\/span>>\r\n      <h3>HOME<\/h3>\r\n      <p>A markup language is a programming language that is used make text more interactive and \r\n        dynamic. It can turn a text into images, tables, links etc.<\/p>\r\n    <\/div>\r\n    <div id=\"menu1\"<\/span> class=\"tab-pane fade\"<\/span><\/span><\/span>>\r\n      <h3>Menu 1<\/h3>\r\n      <p>Java is a high level, robust, secured and object-oriented programming language.<\/p>\r\n    <\/div>\r\n    <div id=\"menu2\"<\/span> class=\"tab-pane fade\">\r\n      <h3>Menu 2<\/h3>\r\n      <p>SQL is just a query language, it is not a database. To perform SQL queries, \r\n      you need to install any database for <\/span>example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.<\/p>\r\n    <\/div>\r\n    <div id=\"menu3\"<\/span> class=\"tab-pane fade\">\r\n      <h3>Menu 3<\/h3>\r\n      <p>The C Language is developed for <\/span>creating system applications that direct \r\n       interacts to the hardware devices such as drivers, kernals etc.<\/p>\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=\"http:\/\/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\u6807\u7b7e\/\u5bfc\u822a<\/h2>\n
    \u5bfc\u822a\u83dc\u5355<\/h3>\n
    \n    \u5bfc\u822a\u83dc\u5355\u662f\u7f51\u7ad9\u4e2d\u4f7f\u7528\u7684\u5bfc\u822a\u83dc\u5355\u3002\u5982\u679c\u8981\u5728\u7f51\u7ad9\u4e2d\u521b\u5efa\u7b80\u5355\u7684\u6c34\u5e73\u83dc\u5355\uff0c\u8bf7\u5c06.nav\u7c7b\u6dfb\u52a0\u5230\u5143\u7d20\u4e2d\uff0c\u7136\u540e\u4e3a\u6bcf\u4e2a
    \n   \u6dfb\u52a0.nav-item\u5e76\u5c06.nav-link\u7c7b\u6dfb\u52a0\u5230\u5176\u94fe\u63a5\u4e2d\u3002<\/span>\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>Nav Example<\/h2>\r\n  <p>Basic horizontal menu:<\/p>\r\n  <ul class=\"nav\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span><\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span><\/span> href=\"#\"<\/span><\/span><\/span><\/span>>Link<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a><\/span><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link disabled\"<\/span> href=\"#\">Disabled<\/a><\/span>\r\n    <\/li>\r\n  <\/ul>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
    <\/code>\n  <\/div>\n
    \n
    \u5bf9\u9f50\u7684\u5bfc\u822a<\/h3>\n
    \n    \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u5bfc\u822a\u680f\u662f\u5de6\u5bf9\u9f50\u7684\u3002\n  <\/div>\n
    \n    \u5bf9\u4e8e\u5c45\u4e2d\u5bf9\u9f50: \u6dfb\u52a0.justify-content-center\u7c7b\u4ee5\u4f7f\u5bfc\u822a\u4e2d\u5fc3\u5c45\u4e2d\u5bf9\u9f50\u3002\n  <\/div>\n
    \n    \u7528\u4e8e\u53f3\u5bf9\u9f50: \u6dfb\u52a0.justify-content-end\u7c7b\u4ee5\u5c06\u5bfc\u822a\u53f3\u5bf9\u9f50\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>Nav Example<\/h2>\r\n  <h4>Left-aligned nav (default):<\/h4>\r\n  <ul class=\"nav\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span> href=\"#\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>Link<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link disabled\"<\/span><\/span><\/span> href=\"#\">Disabled<\/a><\/span><\/span><\/span>\r\n    <\/li>\r\n  <\/ul>\r\n  \r\n  <h4>Centered nav:<\/h4>\r\n  <ul class=\"nav justify-content-center\"<\/span>>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link disabled\" href=\"#\">Disabled<\/a>\r\n    <\/li>\r\n  <\/ul>  \r\n  <h4>Right-aligned nav:<\/h4>\r\n  <ul class=\"nav justify-content-end\"<\/span>>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link disabled\" href=\"#\">Disabled<\/a>\r\n    <\/li>\r\n  <\/ul>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
    <\/code>\n  <\/div>\n
    \n
    \u5782\u76f4\u5bfc\u822a<\/h3>\n
    \n    \u6dfb\u52a0.flex-column\u7c7b\u4ee5\u521b\u5efa\u5782\u76f4\u5bfc\u822a\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>Vertical Nav Example<\/h2>\r\n  <p>Use the .flex-column class <\/span>to create a vertical nav:<\/p>\r\n  <ul class=\"nav flex-column\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span><\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span><\/span> href=\"#\"<\/span><\/span><\/span><\/span>>Link<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a><\/span><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link disabled\"<\/span> href=\"#\">Disabled<\/a><\/span>\r\n    <\/li>\r\n  <\/ul>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
    <\/code>\n  <\/div>\n
    \n
    \u5408\u7406\u7684\u6807\u7b7e\/\u5bfc\u822a<\/h3>\n
    \n    \u5bf9\u4e8e\u5408\u7406\u7684\u6807\u7b7e\/\u5bfc\u822a\uff0c\u8bf7\u6dfb\u52a0.nav\u5bf9\u9f50\u7684\u7c7b(\u7b49\u5bbd):\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>Justified Tabs\/Pills Example<\/h2>\r\n  <p>To justify tabs\/pills (equal width), use the .nav-justified class:<\/p>\r\n  <ul class=\"nav nav-pills nav-justified\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>\r\n      <a class=\"nav-link active\"<\/span><\/span> href=\"#\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>Active<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\"<\/span><\/span><\/span><\/span> href=\"#\">Link<\/a><\/span><\/span><\/span><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link disabled\"<\/span><\/span> href=\"#\">Disabled<\/a><\/span><\/span>\r\n    <\/li>\r\n  <\/ul><br>\r\n  <h4>Justified tabs:<\/h4>\r\n  <ul class=\"nav nav-tabs nav-justified\"<\/span>>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link active\" href=\"#\">Active<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link disabled\" href=\"#\">Disabled<\/a>\r\n    <\/li>\r\n  <\/ul>\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 \u5bfc\u822azh-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-1998","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1998"}],"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=1998"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1998\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}