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


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

\n

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

Bootstrap\u5bfc\u822a\u680f<\/h2>\n
\n \u5bfc\u822a\u680f\u5c31\u50cf\u653e\u5728\u9875\u9762\u9876\u90e8\u7684\u5bfc\u822a\u6807\u9898\u4e00\u6837\u3002\u60a8\u53ef\u4ee5\u6839\u636e\u5c4f\u5e55\u5c3a\u5bf8\u6298\u53e0\u6216\u6269\u5c55\u5b83\u3002\n <\/div>\n
\n \u60a8\u53ef\u4ee5\u4f7f\u7528 \u5728\u9875\u9762\u9876\u90e8\u521b\u5efa\u6807\u51c6\u5bfc\u822a\u680f\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=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n  \r\n<\/head>\r\n<body>\r\n<nav class=\"navbar navbar-default\"<\/span>>\r\n  <div class=\"container-fluid\"<\/span>>\r\n    <div class=\"navbar-header\"<\/span>>\r\n      <a class=\"navbar-brand\"<\/span> href=\"#\"<\/span><\/span><\/span><\/span><\/span>>WebSiteName<\/a><\/span>\r\n    <\/div>\r\n    <ul class=\"nav navbar-nav\"<\/span>>\r\n      <li class=\"active\"<\/span>><a href=\"#\">Home<\/a><\/li><\/span>\r\n      <li><a href=\"#\">Page 1<\/a><\/li><\/span>\r\n      <li><a href=\"#\">Page 2<\/a><\/li><\/span>\r\n      <li><a href=\"#\">Page 3<\/a><\/li><\/span>\r\n    <\/ul>\r\n  <\/div>\r\n<\/nav>\r\n  \r\n<div class=\"container\"<\/span>>\r\n  <h3>Basic Navbar Example<\/h3>\r\n  <p>A navigation bar is a navigation header that is placed at the top of the page.<\/p>\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\u53cd\u5411\u5bfc\u822a\u680f<\/h3>\n
\n    \u53cd\u5411\u5bfc\u822a\u680f\u63d0\u4f9b\u4e86\u53e6\u4e00\u79cd\u9ed1\u8272\u5bfc\u822a\u680f\u3002\u901a\u8fc7\u5c06 .navbar-default\u7c7b\u66f4\u6539\u4e3a .navbar-inverse\u7c7b\uff0c\u53ef\u7528\u4e8e\u8bbe\u7f6e\u9ed8\u8ba4\u5bfc\u822a\u680f\u7684\u6837\u5f0f\u3002\n  <\/div>\n
\n    \u67e5\u770b\u6b64\u4f8b\u5982:\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=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n  \r\n<\/head>\r\n<body>\r\n<nav class=\"navbar navbar-inverse\"<\/span>>\r\n  <div class=\"container-fluid\"<\/span>>\r\n    <div class=\"navbar-header\"<\/span>>\r\n      <a class=\"navbar-brand\"<\/span> href=\"#\"<\/span><\/span><\/span><\/span><\/span>>WebSiteName<\/a><\/span>\r\n    <\/div>\r\n    <ul class=\"nav navbar-nav\"<\/span>>\r\n      <li class=\"active\"<\/span>><a href=\"#\">Home<\/a><\/li><\/span>\r\n      <li><a href=\"#\">Page 1<\/a><\/li><\/span>\r\n      <li><a href=\"#\">Page 2<\/a><\/li><\/span>\r\n      <li><a href=\"#\">Page 3<\/a><\/li><\/span>\r\n    <\/ul>\r\n  <\/div>\r\n<\/nav>\r\n  \r\n<div class=\"container\"<\/span>>\r\n  <h3>Inverted Navbar<\/h3>\r\n  <p>An inverted navbar is black instead of gray.<\/p>\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
\u5e26\u6709\u4e0b\u62c9\u83dc\u5355\u7684Bootstrap\u5bfc\u822a\u680f<\/h3>\n
\n    \u60a8\u8fd8\u53ef\u4ee5\u6dfb\u52a0\u5e26\u6709\u5bfc\u822a\u680f\u7684\u4e0b\u62c9\u83dc\u5355\u3002\u4ee5\u4e0b\u793a\u4f8b\u4e3a\"\u7b2c1\u9875\"\u6309\u94ae\u6dfb\u52a0\u4e86\u4e00\u4e2a\u4e0b\u62c9\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=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n  \r\n<\/head>\r\n<body>\r\n<nav class=\"navbar navbar-inverse\"<\/span>>\r\n  <div class=\"container-fluid\"<\/span>>\r\n    <div class=\"navbar-header\"<\/span>>\r\n      <a class=\"navbar-brand\"<\/span> href=\"#\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>WebSiteName<\/a><\/span>\r\n    <\/div>\r\n    <ul class=\"nav navbar-nav\"<\/span>>\r\n      <li class=\"active\"<\/span>><a href=\"#\">Home<\/a><\/li><\/span>\r\n      <li class=\"dropdown\"<\/span><\/span>><a class=\"dropdown-toggle\"<\/span> data-toggle=\"dropdown\" href=\"#\">Page 1 <span class=\"caret\"<\/span>><\/span><\/a><\/span>\r\n        <ul class=\"dropdown-menu\"<\/span>>\r\n          <li><a href=\"#\">Page 1-1<\/a><\/li><\/span>\r\n          <li><a href=\"#\">Page 1-2<\/a><\/li><\/span>\r\n          <li><a href=\"#\">Page 1-3<\/a><\/li><\/span>\r\n        <\/ul>\r\n      <\/li>\r\n      <li><a href=\"#\">Page 2<\/a><\/li><\/span>\r\n      <li><a href=\"#\">Page 3<\/a><\/li><\/span>\r\n    <\/ul>\r\n  <\/div>\r\n<\/nav>\r\n  \r\n<div class=\"container\"<\/span>>\r\n  <h3>Navbar With Dropdown<\/h3>\r\n  <p>this<\/span> example adds a dropdown menu for <\/span>the \"Page 1\"<\/span> button in the navigation bar.<\/p>\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 \u53f3\u5bf9\u9f50\u5bfc\u822a\u680f<\/h3>\n
\n    \u4f7f\u7528 .navbar-right class \u53f3\u5bf9\u9f50\u5bfc\u822a\u680f\u6309\u94ae\u3002\u5728\u4ee5\u4e0b\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u5728\u5bfc\u822a\u680f\u4e2d\u5411\u53f3\u4fa7\u6dfb\u52a0\u4e86\"\u6ce8\u518c\"\u548c\"\u767b\u5f55\"\u6309\u94ae\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=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n  \r\n<\/head>\r\n<body>\r\n<nav class=\"navbar navbar-inverse\"<\/span>>\r\n  <div class=\"container-fluid\"<\/span>>\r\n    <div class=\"navbar-header\"<\/span>>\r\n      <a class=\"navbar-brand\"<\/span> href=\"#\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>WebSiteName<\/a><\/span>\r\n    <\/div>\r\n    <ul class=\"nav navbar-nav\"<\/span>>\r\n      <li class=\"active\"<\/span>><a href=\"#\">Home<\/a><\/li><\/span>\r\n      <li class=\"dropdown\"<\/span><\/span>><a class=\"dropdown-toggle\"<\/span> data-toggle=\"dropdown\" href=\"#\">Page 1 <span class=\"caret\"<\/span>><\/span><\/a><\/span>\r\n        <ul class=\"dropdown-menu\"<\/span>>\r\n          <li><a href=\"#\">Page 1-1<\/a><\/li><\/span>\r\n          <li><a href=\"#\">Page 1-2<\/a><\/li><\/span>\r\n          <li><a href=\"#\">Page 1-3<\/a><\/li><\/span>\r\n        <\/ul>\r\n      <\/li>\r\n      <li><a href=\"#\">Page 2<\/a><\/li><\/span>\r\n      <li><a href=\"#\">Page 3<\/a><\/li><\/span>\r\n    <\/ul>\r\n    <ul class=\"nav navbar-nav navbar-right\"<\/span>>\r\n      <li><a href=\"#\"><span class=\"glyphicon glyphicon-user\"<\/span>><\/span> Sign Up<\/a><\/li><\/span>\r\n      <li><a href=\"#\"><span class=\"glyphicon glyphicon-log-in\"<\/span>><\/span> Login<\/a><\/li><\/span>\r\n    <\/ul>\r\n  <\/div>\r\n<\/nav>\r\n  \r\n<div class=\"container\"<\/span>>\r\n  <h3>Right Aligned Navbar<\/h3>\r\n  <p>The .navbar-right class <\/span>is used to right-align navigation bar buttons.<\/p>\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
\u57fa\u672c\u5bfc\u822a\u680f<\/h2>\n
\n    \u5728Bootstrap 4\u4e2d\uff0c\u60a8\u53ef\u4ee5\u6839\u636e\u5c4f\u5e55\u5c3a\u5bf8\u6765\u6269\u5c55\u6216\u6298\u53e0\u5bfc\u822a\u680f\u3002\u4f7f\u7528.navbar\u7c7b\u521b\u5efa\u4e00\u4e2a\u6807\u51c6\u5bfc\u822a\u680f\uff0c\u7136\u540e\u521b\u5efa\u4e00\u4e2a\u54cd\u5e94\u5f0f\u6298\u53e0\u7c7b: .navbar-expand-xl | lg | md | sm(\u5c06\u5bfc\u822a\u680f\u5782\u76f4\u5806\u53e0\u5728\u8d85\u5927\uff0c\u5927\uff0c\u4e2d\u6216\u5c0f\u5c4f\u5e55\u4e0a)\u3002\n  <\/div>\n
\n    \u8981\u5728\u5bfc\u822a\u680f\u4e2d\u6dfb\u52a0\u94fe\u63a5\uff0c\u8bf7\u4f7f\u7528\u5143\u7d20\u548cclass =\"navbar-nav\"\u3002\u7136\u540e\u6dfb\u52a0\u5177\u6709.nav-item\u7c7b\u7684\u5143\u7d20\uff0c\u7136\u540e\u6dfb\u52a0\u5177\u6709.nav-link\u7c7b\u7684\u5143\u7d20\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-fluid\"<\/span>>\r\n  <h3>Basic Navbar Example<\/h3>\r\n  <p>A navigation bar is a navigation header that is placed at the top of the page.<\/p>\r\n  \r\n<\/div>\r\n<nav class=\"navbar navbar-expand-sm bg-light\"<\/span>>\r\n  <ul class=\"navbar-nav\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span><\/span> href=\"#\"<\/span><\/span><\/span>>Link 1<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link 2<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link 3<\/a><\/span>\r\n    <\/li>\r\n  <\/ul>\r\n<\/nav>\r\n<br>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u5782\u76f4\u5bfc\u822a\u680f<\/h3>\n
\n    \u5982\u679c\u8981\u521b\u5efa\u5782\u76f4\u5bfc\u822a\u680f\uff0c\u8bf7\u5220\u9664.navbar-expand-xl | lg | md | sm\u7c7b\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-fluid\"<\/span>>\r\n  <h3>Vertical Navbar Example<\/h3>\r\n  <p>A navigation bar is a navigation header that is placed at the top of the page.<\/p>\r\n<\/div>\r\n<nav class=\"navbar bg-light\"<\/span>>\r\n  <ul class=\"navbar-nav\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span><\/span> href=\"#\"<\/span><\/span><\/span>>Link 1<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link 2<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link 3<\/a><\/span>\r\n    <\/li>\r\n  <\/ul>\r\n<\/nav>\r\n<br>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u5f69\u8272\u5bfc\u822a\u680f<\/h3>\n
\n    \u60a8\u53ef\u4ee5\u4f7f\u7528\u4efb\u4f55.bg-color\u7c7b\u6765\u66f4\u6539\u5bfc\u822a\u680f\u7684\u80cc\u666f\u989c\u8272(.bg-primary\uff0c.bg-success\uff0c .bg-info\uff0c.bg-warning\uff0c.bg-danger\uff0c.bg-secondary\uff0c.bg-dark\u548c.bg-light)\u3002\n  <\/div>\n
\n   \u6ce8\u610f: <\/span>\u4f7f\u7528.navbar-dark\u7c7b\u5411\u5bfc\u822a\u680f\u4e2d\u7684\u6240\u6709\u94fe\u63a5\u6dfb\u52a0\u767d\u8272\u6587\u672c\u989c\u8272\uff0c\u6216\u4f7f\u7528.navbar-light\u7c7b\u6dfb\u52a0\u9ed1\u8272\u6587\u672c\u989c\u8272\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  <h3>Colored Navbar Example<\/h3>\r\n \r\n<\/div>\r\n<nav class=\"navbar navbar-expand-sm bg-light navbar-light\"<\/span>>\r\n  <ul class=\"navbar-nav\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>\r\n    <li class=\"nav-item active\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span> href=\"#\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>Active<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>\r\n      <a class=\"nav-link\" href=\"#\">Link<\/a><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/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><\/span><\/span><\/span><\/span><\/span> href=\"#\">Disabled<\/a><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\r\n    <\/li>\r\n  <\/ul>\r\n<\/nav>\r\n<nav class=\"navbar navbar-expand-sm bg-dark navbar-dark\"<\/span>>\r\n  <ul class=\"navbar-nav\">\r\n    <li class=\"nav-item active\">\r\n      <a class=\"nav-link\" href=\"#\">Active<\/a><\/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\" 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<\/nav>\r\n<nav class=\"navbar navbar-expand-sm bg-primary navbar-dark\"<\/span>>\r\n  <ul class=\"navbar-nav\">\r\n    <li class=\"nav-item active\">\r\n      <a class=\"nav-link\" href=\"#\">Active<\/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<\/nav>\r\n<nav class=\"navbar navbar-expand-sm bg-success navbar-dark\"<\/span>>\r\n  <ul class=\"navbar-nav\">\r\n    <li class=\"nav-item active\">\r\n      <a class=\"nav-link\" href=\"#\">Active<\/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<\/nav>\r\n<nav class=\"navbar navbar-expand-sm bg-info navbar-dark\"<\/span>>\r\n  <ul class=\"navbar-nav\">\r\n    <li class=\"nav-item active\">\r\n      <a class=\"nav-link\" href=\"#\">Active<\/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<\/nav>\r\n<nav class=\"navbar navbar-expand-sm bg-warning navbar-dark\"<\/span>>\r\n  <ul class=\"navbar-nav\">\r\n    <li class=\"nav-item active\">\r\n      <a class=\"nav-link\" href=\"#\">Active<\/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<\/nav>\r\n<nav class=\"navbar navbar-expand-sm bg-danger navbar-dark\"<\/span>>\r\n  <ul class=\"navbar-nav\">\r\n    <li class=\"nav-item active\">\r\n      <a class=\"nav-link\" href=\"#\">Active<\/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<\/nav>\r\n<nav class=\"navbar navbar-expand-sm bg-secondary navbar-dark\"<\/span>>\r\n  <ul class=\"navbar-nav\">\r\n    <li class=\"nav-item active\">\r\n      <a class=\"nav-link\" href=\"#\">Active<\/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<\/nav>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u54c1\u724c\/\u5fbd\u6807<\/h3>\n
\n    .navbar-brand\u7c7b\u7528\u4e8e\u7a81\u51fa\u663e\u793a\u9875\u9762\u7684\u54c1\u724c\/\u5fbd\u6807\/\u9879\u76ee\u540d\u79f0\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<nav class=\"navbar navbar-expand-sm bg-dark navbar-dark\"<\/span>>\r\n  <!--Brand\/logo-->\r\n  <a class=\"navbar-brand\"<\/span> href=\"#\"<\/span><\/span><\/span><\/span>>Logo<\/a><\/span>\r\n  \r\n  <!--Links-->\r\n  <ul class=\"navbar-nav\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span><\/span> href=\"#\">Link 1<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link 2<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link 3<\/a><\/span>\r\n    <\/li>\r\n  <\/ul>\r\n<\/nav>\r\n<div class=\"container-fluid\"<\/span>>\r\n  <h3>Brand \/ Logo<\/h3>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u5982\u679c\u5728\u56fe\u50cf\u4e0a\u4f7f\u7528.navbar-brand\u7c7b\uff0cBootstrap 4\u5c06\u81ea\u52a8\u8bbe\u7f6e\u56fe\u50cf\u6837\u5f0f\u4ee5\u9002\u5408\u5bfc\u822a\u6761\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<nav class=\"navbar navbar-expand-sm bg-dark navbar-dark\"<\/span>>\r\n  <!--Brand\/logo-->\r\n  <a class=\"navbar-brand\"<\/span> href=\"#\"<\/span><\/span><\/span><\/span>><\/span>\r\n    <img src=\"image\"<\/span> alt=\"logo\"<\/span> style=\"width:40px;\"<\/span>>\r\n  <\/a>\r\n  <!--Links-->\r\n  <ul class=\"navbar-nav\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span><\/span> href=\"#\">Link 1<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link 2<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link 3<\/a><\/span>\r\n    <\/li>\r\n  <\/ul>\r\n<\/nav>\r\n<div class=\"container-fluid\"<\/span>>\r\n  <h3>Brand \/ Logo<\/h3>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u5bfc\u822a\u680f\u5f62\u5f0f\u548c\u6309\u94ae<\/h3>\n
\n    \u5e26\u6709class =\"form-inline\"\u7684 <\/p>\n
\n     \u5143\u7d20\u7528\u4e8e\u5c06\u8f93\u5165\u548c\u6309\u94ae\u5e76\u6392\u5206\u7ec4\u3002
\n   <\/form>\n<\/p><\/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<nav class=\"navbar navbar-expand-sm bg-dark navbar-dark\"<\/span>>\r\n  <form class=\"form-inline\"<\/span> action=\"\/action_page.php\"<\/span>>\r\n    <input class=\"form-control\"<\/span> type=\"text\"<\/span> placeholder=\"Search\"<\/span>>\r\n    <button class=\"btn btn-success\"<\/span> type=\"submit\"<\/span>>Search<\/button>\r\n  <\/form>\r\n<\/nav>\r\n<br>\r\n<div class=\"container\"<\/span>>\r\n  <h3>Navbar Forms<\/h3>\r\n  <p>Use the .form-inline class <\/span>to align form elements side by side inside the navbar.<\/p>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528\u5176\u4ed6\u8f93\u5165\u7c7b\uff0c\u4f8b\u5982.input-group-addon\u5728\u8f93\u5165\u5b57\u6bb5\u65c1\u8fb9\u9644\u52a0\u56fe\u6807\u6216\u5e2e\u52a9\u6587\u672c\u3002\u60a8\u5c06\u5728\" Bootstrap\u8f93\u5165\"\u4e00\u7ae0\u4e2d\u4e86\u89e3\u6709\u5173\u8fd9\u4e9b\u7c7b\u7684\u66f4\u591a\u4fe1\u606f\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<nav class=\"navbar navbar-expand-sm bg-dark navbar-dark\"<\/span>>\r\n  <form class=\"form-inline\"<\/span>>\r\n    <div class=\"input-group\"<\/span>>\r\n      <span class=\"input-group-addon\"<\/span>>@<\/span>\r\n      <input type=\"text\"<\/span> class=\"form-control\"<\/span> placeholder=\"Username\"<\/span>>\r\n    <\/div>    \r\n  <\/form>\r\n<\/nav>\r\n<br>\r\n<div class=\"container\"<\/span>>\r\n  <h3>Navbar Forms<\/h3>\r\n  <p>Use the .form-inline class <\/span>to align form elements side by side inside the navbar.<\/p>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u5bfc\u822a\u680f\u6587\u672c<\/h3>\n
\n    .navbar-text\u7c7b\u7528\u4e8e\u5782\u76f4\u5bf9\u9f50\u5bfc\u822a\u680f\u4e2d\u7684\u6240\u6709\u975e\u94fe\u63a5\u5143\u7d20\u3002\u60a8\u5fc5\u987b\u786e\u4fdd\u6b63\u786e\u7684\u586b\u5145\u548c\u6587\u672c\u989c\u8272\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<nav class=\"navbar navbar-expand-sm bg-dark navbar-dark\"<\/span>>\r\n  <!--Links-->\r\n  <ul class=\"navbar-nav\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span> href=\"#\"<\/span><\/span>>Link 1<\/a><\/span>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"#\">Link 2<\/a><\/span>\r\n    <\/li>\r\n  <\/ul>\r\n  <!--Navbar text-->\r\n  <span class=\"navbar-text\"<\/span>>\r\n    Navbar text\r\n  <\/span>\r\n<\/nav>\r\n<br>\r\n<div class=\"container\"<\/span>>\r\n  <h3>Navbar Text<\/h3>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u56fa\u5b9a\u7684\u5bfc\u822a\u680f<\/h3>\n
\n    \u60a8\u53ef\u4ee5\u5c06\u5bfc\u822a\u680f\u56fa\u5b9a\u5728\u9875\u9762\u7684\u9876\u90e8\u6216\u5e95\u90e8\u3002\u56fa\u5b9a\u5bfc\u822a\u680f\u5728\u56fa\u5b9a\u4f4d\u7f6e(\u9876\u90e8\u6216\u5e95\u90e8)\u4fdd\u6301\u53ef\u89c1\uff0c\u800c\u65e0\u9700\u4f9d\u8d56\u9875\u9762\u6eda\u52a8\u3002\n  <\/div>\n
\n    \u9876\u90e8\u56fa\u5b9a\u5bfc\u822a\u680f\n  <\/div>\n
\n    .fixed-top\u7c7b\u5c06\u5bfc\u822a\u680f\u56fa\u5b9a\u5728\u9876\u90e8\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 style=\"height:1500px\"<\/span>>\r\n<nav class=\"navbar navbar-expand-sm bg-dark navbar-dark fixed-top\"<\/span>>\r\n  <a class=\"navbar-brand\"<\/span> href=\"#\"<\/span><\/span><\/span>>Logo<\/a><\/span>\r\n  <ul class=\"navbar-nav\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span> 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  <\/ul>\r\n<\/nav>\r\n<div class=\"container-fluid\"<\/span> style=\"margin-top:80px\"<\/span>>\r\n  <h3>Top Fixed Navbar<\/h3>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u5e95\u90e8\u56fa\u5b9a\u5bfc\u822a\u680f<\/h3>\n
\n    .fixed-bottom\u7c7b\u7528\u4e8e\u4f7f\u5bfc\u822a\u680f\u505c\u7559\u5728\u9875\u9762\u5e95\u90e8\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 style=\"height:1500px\"<\/span>>\r\n<nav class=\"navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom\"<\/span>>\r\n  <a class=\"navbar-brand\"<\/span> href=\"#\"<\/span>>Logo<\/a><\/span>\r\n  <ul class=\"navbar-nav\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span> href=\"javascript:void(0)\"<\/span><\/span>>Link<\/a>\r\n    <\/li>\r\n    <li class=\"nav-item\">\r\n      <a class=\"nav-link\" href=\"javascript:void(0)\">Link<\/a>\r\n    <\/li>\r\n  <\/ul>\r\n<\/nav>\r\n<div class=\"container-fluid\"<\/span>><br>\r\n  <h3>Bottom Fixed Navbar<\/h3>\r\n  <h1>Scroll this<\/span> page to see the effect<\/h1>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u7c98\u6027\u5bfc\u822a\u680f<\/h3>\n
\n    \u6eda\u52a8\u6d4f\u89c8\u65f6\uff0c\u7c98\u6027\u5bfc\u822a\u680f\u56fa\u5b9a\u5728\u9875\u9762\u9876\u90e8\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u6eda\u52a8\u6b64\u9875\u9762\u6765\u67e5\u770b\u6548\u679c\u3002\n  <\/div>\n
\n   \u6ce8\u610f: <\/span>\u6b64\u529f\u80fd\u5728IE11\u548c\u66f4\u65e9\u7248\u672c\u4e2d\u4e0d\u8d77\u4f5c\u7528\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 style=\"height:1500px\"<\/span>>\r\n<div class=\"container-fluid\"<\/span><\/span>>\r\n  <br>\r\n  <h3>Sticky Navbar<\/h3>\r\n  <p>You can see the effect by scrolling this<\/span> page.<\/p>\r\n  <p><strong>Note:<\/strong> this<\/span> facility doesn't work in IE11 and earlier version. <\/p>\r\n<\/div>\r\n<nav class=\"navbar navbar-expand-sm bg-dark navbar-dark sticky-top\"<\/span>>\r\n  <a class=\"navbar-brand\"<\/span> href=\"#\"<\/span><\/span><\/span>>Logo<\/a><\/span>\r\n  <ul class=\"navbar-nav\"<\/span>>\r\n    <li class=\"nav-item\"<\/span><\/span>>\r\n      <a class=\"nav-link\"<\/span><\/span> 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  <\/ul>\r\n<\/nav>\r\n<div class=\"container-fluid\"><br>\r\n  <p>Some example text. Some example text. Some example text. Some example text. Some example text.<\/p>\r\n  <p>Some example text. Some example text. Some example text. Some example text. Some example text.<\/p>\r\n  <p>Some example text. Some example text. Some example text. Some example text. Some example text.<\/p>\r\n  <p>Some example text. Some example text. Some example text. Some example text. Some example text.<\/p>\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\u822a\u680fzh-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-1999","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1999"}],"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=1999"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1999\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}