Bootstrap \u56fe\u50cf<\/h1>\n<\/p><\/div>\n

Bootstrap \u56fe\u50cf<\/h2>\n

\n Bootstrap\u652f\u6301\u56fe\u50cf\u3002 Bootstrap\u4e2d\u6709\u4e09\u4e2a\u7c7b\uff0c\u53ef\u7528\u4e8e\u5c06\u4e00\u4e9b\u7b80\u5355\u6837\u5f0f\u5e94\u7528\u4e8e\u56fe\u50cf\u3002\n <\/div>\n

\n \u4ee5\u4e0b\u7c7b\u4e3a\u56fe\u50cf\u6dfb\u52a0\u6837\u5f0f:\n <\/div>\n\n\n\n\n\n\n

Class<\/td>\n	\u7528\u9014<\/td>\n<\/tr>\n
.img-rounded<\/td>\n	\u5b83\u6dfb\u52a0\u4e86border-radius: 6px\u4ee5\u4f7f\u56fe\u50cf\u5177\u6709\u5706\u89d2\u3002<\/td>\n<\/tr>\n
.img-circle<\/td>\n	\u901a\u8fc7\u6dfb\u52a0border-radius: 500px\uff0c\u4f7f\u6574\u4e2a\u56fe\u50cf\u53d8\u5706\u3002<\/td>\n<\/tr>\n
.img-thumbnail<\/td>\n	\u5b83\u6dfb\u52a0\u4e86\u4e00\u4e9b\u586b\u5145\u548c\u7070\u8272\u8fb9\u6846\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n \n Bootstrap\u56fe\u50cf\u56db\u820d\u4e94\u5165\u793a\u4f8b<\/h2>\n \n class.img-rounded \u7528\u4e8e\u5411\u56fe\u50cf\u6dfb\u52a0\u5706\u89d2(IE8\u4e0d\u652f\u6301\u5706\u89d2)\u3002\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 image<\/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 <h2>Rounded Corners<\/h2> \r\n <img src=\"abc.jpg\"<\/span> class=\"img-rounded\"<\/span> alt=\"abc\"<\/span> width=\"300\"<\/span> height=\"250\"<\/span>> \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 Bootstrap \u56fe\u50cf\u5706\u793a\u4f8b<\/h2>\n\n class.img-circle \u7528\u4e8e\u5c06\u56fe\u50cf\u6210\u5f62\u4e3a\u5706\u5f62(IE8\u4e0d\u652f\u6301\u5706\u89d2)\u3002\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 image<\/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 <h2>Circle<\/h2> \r\n <img src=\"abc.jpg\"<\/span> class=\"img-circle\"<\/span> alt=\"abc\"<\/span> width=\"300\"<\/span> height=\"250\"<\/span>> \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>\r\n <\/pre>\n<\/code>\n <\/div>\n Bootstrap\u7f29\u7565\u56fe\u56fe\u50cf\u793a\u4f8b<\/h2>\n\n class.img-\u7f29\u7565\u56fe\u7528\u4e8e\u5c06\u56fe\u50cf\u6210\u5f62\u4e3a\u7f29\u7565\u56fe\u3002\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 image<\/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 <h2>Thumbnail<\/h2> \r\n <img src=\"abc.jpg\"<\/span> class=\"img-thumbnail\"<\/span> alt=\"abc\"<\/span> width=\"300\"<\/span> height=\"250\"<\/span>> \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\u54cd\u5e94\u5f0f\u56fe\u50cf<\/h2>\n\n \u54cd\u5e94\u5f0f\u56fe\u50cf\u53ef\u4ee5\u81ea\u52a8\u8c03\u6574\u81ea\u8eab\u4ee5\u9002\u5408\u5c4f\u5e55\u5c3a\u5bf8\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u5728 \n \u6807\u8bb0\u4e2d\u6dfb\u52a0 .img\u54cd\u5e94\u7c7b\u6765\u521b\u5efa\u54cd\u5e94\u56fe\u50cf\u3002\u7136\u540e\uff0c\u56fe\u50cf\u5c06\u5f88\u597d\u5730\u7f29\u653e\u5230\u7236\u5143\u7d20\u3002\n <\/div>\n\n .img\u54cd\u5e94\u7c7b\u5e94\u7528display: block;\u6700\u5927\u5bbd\u5ea6: 100\uff05\uff1b\u548c\u9ad8\u5ea6: \u81ea\u52a8\uff1b\n <\/div>\n\n \u793a\u4f8b:\n <\/div>\n\n <!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n \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<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>Responsive Image<\/h2>\r\n <img class=\"img-responsive\"<\/span> src=\"abc.jpg\"<\/span> alt=\"abc\"<\/span> width=\"460\"<\/span> height=\"345\"<\/span>> \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 \r\n<\/body>\r\n<\/html>\r\n <\/pre>\n<\/code>\n <\/div>\n \nBootstrap \u54cd\u5e94\u89c6\u9891\/\u5d4c\u5165<\/h3>\n\n \u5728Bootstrap\u4e2d\uff0c\u60a8\u8fd8\u53ef\u4ee5\u6dfb\u52a0\u89c6\u9891\u5e76\u5728\u4efb\u4f55\u8bbe\u5907\u4e0a\u6b63\u786e\u7f29\u653e\u5b83\u4eec\u3002 class.embed-response-item \u7528\u4e8e\u521b\u5efa\u54cd\u5e94\u89c6\u9891\u3002\u7c7b\u53ef\u4ee5\u76f4\u63a5\u5e94\u7528\u4e8e<iframe>\uff0c<embed>\uff0c<video>\u548c<object>\u5143\u7d20\u3002\n <\/div>\n\n \u8ba9\u6211\u4eec\u4e3e\u4e2a\u4f8b\u5b50:\n <\/div>\n\n \u5728\u4ee5\u4e0b\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u5411<iframe>\u6807\u7b7e\u6dfb\u52a0\u4e86 .embed-response-item\u7c7b\u4ee5\u4f7f\u89c6\u9891\u5177\u6709\u54cd\u5e94\u6027\u3002\u5b83\u53ef\u4ee5\u6839\u636e\u7236\u5143\u7d20\u5f88\u597d\u5730\u7f29\u653e\u89c6\u9891\u3002\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<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>Responsive Embed<\/h2>\r\n <div class=\"embed-responsive embed-responsive-16by9\"<\/span>>\r\n <iframe class=\"embed-responsive-item\"<\/span> src=\"https:\/\/www.youtube.com\/embed\/XGSy3_Czz8k\"<\/span>><\/iframe>\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=\"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 Bootstrap4\u56fe\u50cf<\/h2>\n\n \u5bf9\u9f50\u56fe\u50cf\u7528\u4e8e\u4f7f\u7528.float-right\u7c7b\u5c06\u56fe\u50cf\u6d6e\u52a8\u5230\u53f3\u4fa7\uff0c\u6216\u4f7f\u7528.float-left\u56fe\u50cf\u6d6e\u52a8\u5230\u5de6\u4fa7\u3002\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\/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>Aligning images Example<\/h2>\r\n <p>Use the float<\/span> classes to float<\/span> the image to the left or to the right:<\/p> \r\n <img src=\"good-morning.jpg\"<\/span><\/span> class=\"float<\/span>-left\"<\/span> alt=\"abc\"<\/span><\/span> width=\"300\"<\/span><\/span> height=\"250\"<\/span><\/span>> \r\n <img src=\"good-morning.jpg\" class=\"float<\/span>-right\"<\/span> alt=\"abc\" width=\"300\" height=\"250\"> \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 \u56fe\u50cfzh-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-1991","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1991"}],"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=1991"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1991\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}