\n
<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n <head>\r\n <title>Job<\/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>Basic Table Example<\/h1>\r\n<table class=\"table\"<\/span>>\r\n <tr><th>Id<\/th><th>Name<\/th><th>Age<\/th><\/tr>\r\n <tr><td>101<\/td><td>Rahul<\/td><td>23<\/td><\/tr>\r\n <tr><td>102<\/td><td>Umesh<\/td><td>22<\/td><\/tr>\r\n <tr><td>103<\/td><td>Max<\/td><td>29<\/td><\/tr>\r\n <tr><td>104<\/td><td>Ajeet<\/td><td>21<\/td><\/tr>\r\n<\/table>\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
\nBootstrap \u6761\u5e26\u5316\u7684\u884c\u8868: <\/h3>\n\n .table-striped\u7c7b\u7528\u4e8e\u5411\u8868\u4e2d\u6dfb\u52a0\u6591\u9a6c\u6761\u7eb9:\n <\/div>\n\n<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n <head>\r\n <title>Job<\/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>Striped Table Example<\/h1>\r\n<table class=\"table table-striped\"<\/span>>\r\n <tr><th>Id<\/th><th>Name<\/th><th>Age<\/th><\/tr>\r\n <tr><td>101<\/td><td>Rahul<\/td><td>23<\/td><\/tr>\r\n <tr><td>102<\/td><td>Umesh<\/td><td>22<\/td><\/tr>\r\n <tr><td>103<\/td><td>Max<\/td><td>29<\/td><\/tr>\r\n <tr><td>104<\/td><td>Ajeet<\/td><td>21<\/td><\/tr>\r\n<\/table>\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 Bootstrap\u5e26\u8fb9\u6846\u7684\u8868: <\/h3>\n\n .table-bordered\u7c7b\u7528\u4e8e\u5728\u8868\u548c\u5355\u5143\u683c\u7684\u6240\u6709\u4fa7\u9762\u6dfb\u52a0\u8fb9\u6846:\n <\/div>\n\n<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n <head>\r\n <title>Job<\/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>Bordered Table Example<\/h1>\r\n<table class=\"table table-striped table-bordered\"<\/span>>\r\n <tr><th>Id<\/th><th>Name<\/th><th>Age<\/th><\/tr>\r\n <tr><td>101<\/td><td>Rahul<\/td><td>23<\/td><\/tr>\r\n <tr><td>102<\/td><td>Umesh<\/td><td>22<\/td><\/tr>\r\n <tr><td>103<\/td><td>Max<\/td><td>29<\/td><\/tr>\r\n <tr><td>104<\/td><td>Ajeet<\/td><td>21<\/td><\/tr>\r\n<\/table>\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
\nBootstrap \u60ac\u505c\u884c\u8868: <\/h3>\n\n .table-hover\u7c7b\u7528\u4e8e\u5728\u8868\u884c\u4e0a\u542f\u7528\u60ac\u505c\u72b6\u6001:\n <\/div>\n\n<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n <head>\r\n <title>Job<\/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>Hower rows Table Example<\/h1>\r\n<table class=\"table table-hover\"<\/span>>\r\n <tr><th>Id<\/th><th>Name<\/th><th>Age<\/th><\/tr>\r\n <tr><td>101<\/td><td>Rahul<\/td><td>23<\/td><\/tr>\r\n <tr><td>102<\/td><td>Umesh<\/td><td>22<\/td><\/tr>\r\n <tr><td>103<\/td><td>Max<\/td><td>29<\/td><\/tr>\r\n <tr><td>104<\/td><td>Ajeet<\/td><td>21<\/td><\/tr>\r\n<\/table>\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 Bootstrap\u538b\u7f29\u8868: <\/h3>\n\n .table-condensed\u7c7b\u7528\u4e8e\u901a\u8fc7\u5c06\u5355\u5143\u683c\u586b\u5145\u51cf\u534a\u6765\u4f7f\u8868\u66f4\u7d27\u51d1:\n <\/div>\n\n<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n <head>\r\n <title>Job<\/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>Condensed Table Example<\/h1>\r\n<table class=\"table table-condensed\"<\/span>>\r\n <tr><th>Id<\/th><th>Name<\/th><th>Age<\/th><\/tr>\r\n <tr><td>101<\/td><td>Rahul<\/td><td>23<\/td><\/tr>\r\n <tr><td>102<\/td><td>Umesh<\/td><td>22<\/td><\/tr>\r\n <tr><td>103<\/td><td>Max<\/td><td>29<\/td><\/tr>\r\n <tr><td>104<\/td><td>Ajeet<\/td><td>21<\/td><\/tr>\r\n<\/table>\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 Bootstrap\u4e0a\u4e0b\u6587\u7c7b: \u3002<\/h3>\n\n \u4e0a\u4e0b\u6587\u7c7b\u7528\u4e8e\u4e3a\u8868\u884c()\u6216\u8868\u5355\u5143\u683c()\u7740\u8272:\n <\/div>\n\n \u4ee5\u4e0b\u662f\u4e0d\u540c\u7684\u4e0a\u4e0b\u6587\u7c7b:\n <\/div>\n\n\n\nClass<\/td>\n \u8bf4\u660e<\/td>\n<\/tr>\n \n .active <\/td>\n \u7528\u4e8e\u5c06\u60ac\u505c\u989c\u8272\u5e94\u7528\u4e8e\u8868\u683c\u884c\u6216\u8868\u683c\u5355\u5143\u683c<\/td>\n<\/tr>\n \n.success<\/td>\n \u5b83\u8868\u793a\u6210\u529f\u6216\u79ef\u6781\u7684\u884c\u52a8<\/td>\n<\/tr>\n \n .info <\/td>\n \u5b83\u8868\u793a\u4e2d\u7acb\u7684\u4fe1\u606f\u53d8\u5316\u6216\u884c\u52a8<\/td>\n<\/tr>\n \n .warning <\/td>\n \u5b83\u6307\u5b9a\u4e86\u53ef\u80fd\u9700\u8981\u6ce8\u610f\u7684\u8b66\u544a<\/td>\n<\/tr>\n \n .danger <\/td>\n \u5b83\u8868\u793a\u5371\u9669\u6216\u6f5c\u5728\u7684\u8d1f\u9762\u884c\u52a8<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n \u793a\u4f8b:\n <\/div>\n\n<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n <head>\r\n <title>Job<\/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>Contextual classes<\/h1>\r\n<table class=\"table\"<\/span>>\r\n <tr class=\"success\"<\/span>><th>Id<\/th><th>Name<\/th><th>Age<\/th><\/tr>\r\n <tr class=\"active\"<\/span>><td>101<\/td><td>Rahul<\/td><td>23<\/td><\/tr>\r\n <tr class=\"danger\"<\/span>><td>102<\/td><td>Umesh<\/td><td>22<\/td><\/tr>\r\n <tr class=\"info\"<\/span>><td>103<\/td><td>Max<\/td><td>29<\/td><\/tr>\r\n <tr class=\"warning\"<\/span>><td>104<\/td><td>Ajeet<\/td><td>21<\/td><\/tr>\r\n<\/table>\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\u54cd\u5e94\u8868: <\/h3>\n\n .table-sensitive\u7c7b\u7528\u4e8e\u521b\u5efa\u54cd\u5e94\u8868\u3002\u60a8\u751a\u81f3\u53ef\u4ee5\u5728\u5c0f\u578b\u8bbe\u5907(768\u50cf\u7d20\u4ee5\u4e0b)\u4e0a\u6253\u5f00\u8d23\u4efb\u8868\u3002\u7136\u540e\uff0c\u8868\u683c\u5c06\u6c34\u5e73\u6eda\u52a8\u3002\u663e\u793a\u7684\u5bbd\u5ea6\u5927\u4e8e768\u50cf\u7d20\uff0c\u6ca1\u6709\u533a\u522b\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>Job<\/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>Contextual classes<\/h1>\r\n<div class=\"table-responsive\"<\/span>>\r\n<table class=\"table\"<\/span>>\r\n <tr class=\"success\"<\/span>><th>Id<\/th><th>Name<\/th><th>Age<\/th><\/tr>\r\n <tr class=\"active\"<\/span>><td>101<\/td><td>Rahul<\/td><td>23<\/td><\/tr>\r\n <tr class=\"danger\"<\/span>><td>102<\/td><td>Umesh<\/td><td>22<\/td><\/tr>\r\n <tr class=\"info\"<\/span>><td>103<\/td><td>Max<\/td><td>29<\/td><\/tr>\r\n <tr class=\"warning\"<\/span>><td>104<\/td><td>Ajeet<\/td><td>21<\/td><\/tr>\r\n<\/table>\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\n \u6ce8\u610f: <\/span> Bootstrap 4\u4e2d\u4e00\u4e9b\u65b0\u6dfb\u52a0\u7684\u8868:\n <\/div>\nBlack\/Dark Table<\/h3>\n\n .table-dark\u7c7b\u7528\u4e8e\u5411\u8868\u6dfb\u52a0\u9ed1\u8272\u80cc\u666f:\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>Black\/Dark Table<\/h2>\r\n <p>The .table-dark class <\/span>is used to add a black background to the table:<\/p> \r\n <table class=\"table table-dark\"<\/span>>\r\n <thead>\r\n <tr>\r\n <th>Firstname<\/th>\r\n <th>Lastname<\/th>\r\n <th>Email<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Ajeet<\/td>\r\n <td>Kumar<\/td>\r\n <td>ajeet@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Mahesh<\/td>\r\n <td>Sharma<\/td>\r\n <td>mahesh@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Sonoo<\/td>\r\n <td>Jaiswal<\/td>\r\n <td>sonoo@jtp.com<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\nDark Striped Table<\/h3>\n\n \u5c06.table-dark\u7c7b\u548c.table-striped\u7c7b\u5408\u5e76\u4ee5\u521b\u5efaDark Striped Table:\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>Dark Striped Table<\/h2>\r\n <p>Combine the .table-dark class <\/span>and .table-striped class <\/span>to create a dark, striped table: <\/p> \r\n <table class=\"table table-dark table-striped\"<\/span>>\r\n <thead>\r\n <tr>\r\n <th>Firstname<\/th>\r\n <th>Lastname<\/th>\r\n <th>Email<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Ajeet<\/td>\r\n <td>Kumar<\/td>\r\n <td>ajeet@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Mahesh<\/td>\r\n <td>Sharma<\/td>\r\n <td>mahesh@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Sonoo<\/td>\r\n <td>Jaiswal<\/td>\r\n <td>sonoo@jtp.com<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\nHoverable Dark Table<\/h3>\n\n .table-hover\u7c7b\u7528\u4e8e\u5728\u8868\u683c\u884c\u4e0a\u6dfb\u52a0\u60ac\u505c\u6548\u679c(\u7070\u8272\u80cc\u666f\u8272):\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>Hoverable Dark Table<\/h2>\r\n <p>The .table-hover class <\/span>is used to add a hover effect <\/span>(grey background color) on table rows:<\/p> \r\n <table class=\"table table-dark table-hover\"<\/span>>\r\n <thead>\r\n <tr>\r\n <th>Firstname<\/th>\r\n <th>Lastname<\/th>\r\n <th>Email<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Ajeet<\/td>\r\n <td>Kumar<\/td>\r\n <td>ajeet@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Mahesh<\/td>\r\n <td>Sharma<\/td>\r\n <td>mahesh@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Sonoo<\/td>\r\n <td>Jaiswal<\/td>\r\n <td>sonoo@jtp.com<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n Bootstrap 4\u4e0a\u4e0b\u6587\u8868<\/h3>\n\n \u4e0a\u4e0b\u6587\u7c7b\u53ef\u7528\u4e8e\u4e3a\u6574\u4e2a\u8868(<table>)\uff0c\u8868\u884c(<tr>)\u6216\u8868\u5355\u5143\u683c(<td>)\u3002\n <\/div>\n\n \u53ef\u4ee5\u4f7f\u7528\u7684\u7c7b\u662f:\n <\/div>\n\n .table-primary\uff0c.table-success\uff0c.table-info\uff0c.table-warning\uff0c.table-danger\uff0c.table-active\uff0c.table-secondary\uff0c.table-light\u548c.table-dark:\n <\/div>\n\n \u8ba9\u6211\u4eec\u4e3e\u4e2a\u4f8b\u5b50\u6765\u770b\u4e00\u4e0bBootstrap 4\u8868\u4e2d\u6240\u6709\u4e0a\u4e0b\u6587\u7c7b\u7684\u7528\u6cd5\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>Contextual Classes Example<\/h2>\r\n <table class=\"table\"<\/span>>\r\n <thead>\r\n <tr>\r\n <th>Firstname<\/th>\r\n <th>Lastname<\/th>\r\n <th>Email<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Default<\/td>\r\n <td>A<\/td>\r\n <td>a@jtp.com<\/td>\r\n <\/tr> \r\n <tr class=\"table-primary\"<\/span>>\r\n <td>Primary<\/td>\r\n <td>B<\/td>\r\n <td>b@jtp.com<\/td>\r\n <\/tr>\r\n <tr class=\"table-success\"<\/span>>\r\n <td>Success<\/td>\r\n <td>C<\/td>\r\n <td>c@jtp.com<\/td>\r\n <\/tr>\r\n <tr class=\"table-danger\"<\/span>>\r\n <td>Danger<\/td>\r\n <td>D<\/td>\r\n <td>d@jtp.com<\/td>\r\n <\/tr>\r\n <tr class=\"table-info\"<\/span>>\r\n <td>Info<\/td>\r\n <td>E<\/td>\r\n <td>e@jtp.com<\/td>\r\n <\/tr>\r\n <tr class=\"table-warning\"<\/span>>\r\n <td>Warning<\/td>\r\n <td>F<\/td>\r\n <td>f@jtp.com<\/td>\r\n <\/tr>\r\n <tr class=\"table-active\"<\/span>>\r\n <td>Active<\/td>\r\n <td>G<\/td>\r\n <td>g@jtp.com<\/td>\r\n <\/tr>\r\n <tr class=\"table-secondary\"<\/span>>\r\n <td>Secondary<\/td>\r\n <td>H<\/td>\r\n <td>h@jtp.com<\/td>\r\n <\/tr>\r\n <tr class=\"table-light\"<\/span>>\r\n <td>Light<\/td>\r\n <td>I<\/td>\r\n <td>j@jtp.com<\/td>\r\n <\/tr>\r\n <tr class=\"table-dark text-dark\"<\/span>>\r\n <td>Dark<\/td>\r\n <td>K<\/td>\r\n <td>k@jtp.com<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n\u8868\u5934\u989c\u8272<\/h3>\n\n \u60a8\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528.thead-dark\u7c7b\u5411\u8868\u5934\u548c\u8868\u5934\u6dfb\u52a0\u9ed1\u8272\u80cc\u666f\u6765\u66f4\u6539\u8868\u5934\u7684\u80cc\u666f\u8272\u3002 thead-light\u7c7b\u53ef\u4e3a\u8868\u683c\u6807\u9898\u6dfb\u52a0\u7070\u8272\u80cc\u666f\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>Table Head Colors<\/h2>\r\n <table class=\"table\"<\/span><\/span>>\r\n <thead class=\"thead-dark\"<\/span>>\r\n <tr>\r\n <th>Firstname<\/th>\r\n <th>Lastname<\/th>\r\n <th>Email<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <th>Firstname<\/th>\r\n <th>Lastname<\/th>\r\n <th>Email<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Ajeet<\/td>\r\n <td>Kumar<\/td>\r\n <td>ajeet@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Mahesh<\/td>\r\n <td>Sharma<\/td>\r\n <td>mahesh@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Sonoo<\/td>\r\n <td>Jaiswal<\/td>\r\n <td>sonoo@jtp.com<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <table class=\"table\">\r\n <thead class=\"thead-light\"<\/span>>\r\n <tr>\r\n <th>Firstname<\/th>\r\n <th>Lastname<\/th>\r\n <th>Email<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <th>Firstname<\/th>\r\n <th>Lastname<\/th>\r\n <th>Email<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Ajeet<\/td>\r\n <td>Kumar<\/td>\r\n <td>ajeet@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Mahesh<\/td>\r\n <td>Sharma<\/td>\r\n <td>mahesh@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Sonoo<\/td>\r\n <td>Jaiswal<\/td>\r\n <td>sonoo@jtp.com<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n\u5c0f\u8868<\/h3>\n\n .table-sm\u7c7b\u7528\u4e8e\u901a\u8fc7\u5c06\u5355\u5143\u683c\u586b\u5145\u51cf\u534a\u6765\u4f7f\u8868\u53d8\u5c0f\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>Small Table Example<\/h2>\r\n <p>The .table-sm class <\/span>is used to make the table smaller by cutting cell padding in half.<\/p>\r\n <table class=\"table table-bordered table-sm\"<\/span>>\r\n <thead>\r\n <tr>\r\n <th>Firstname<\/th>\r\n <th>Lastname<\/th>\r\n <th>Email<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Ajeet<\/td>\r\n <td>Kumar<\/td>\r\n <td>ajeet@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Mahesh<\/td>\r\n <td>Sharma<\/td>\r\n <td>mahesh@jtp.com<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Sonoo<\/td>\r\n <td>Jaiswal<\/td>\r\n <td>sonoo@jtp.com<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\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\u683czh-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-1983","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1983"}],"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=1983"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1983\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}