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


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

\n

Bootstrap Carousel<\/h1>\n<\/p><\/div>\n

Bootstrap Carousel<\/h2>\n
\n Bootstrap Carousel\u662f\u4e00\u79cd\u7075\u6d3b\u7684\u54cd\u5e94\u5f0f\u65b9\u6cd5\uff0c\u7528\u4e8e\u5411\u7f51\u9875\u6dfb\u52a0\u6ed1\u5757\u3002\u5b83\u5177\u6709\u8db3\u591f\u7684\u54cd\u5e94\u80fd\u529b\u548c\u7075\u6d3b\u6027\uff0c\u8db3\u4ee5\u5141\u8bb8\u60a8\u6dfb\u52a0\u56fe\u50cf\uff0ciframe\uff0c\u89c6\u9891\u6216\u60a8\u8981\u6dfb\u52a0\u7684\u4efb\u4f55\u5176\u4ed6\u7c7b\u578b\u7684\u5185\u5bb9\u3002\n <\/div>\n
\n Carousel\u63d2\u4ef6:\n <\/div>\n
\n Carousel\u63d2\u4ef6\u662f\u4e00\u4e2a\u7528\u4e8e\u5728\u5143\u7d20\u4e4b\u95f4\u5faa\u73af\u7684\u7ec4\u4ef6\uff0c\u4f8b\u5982Carousel\u3002\u5982\u679c\u8981\u5355\u72ec\u6dfb\u52a0\u63d2\u4ef6\u529f\u80fd\uff0c\u5219\u5fc5\u987b\u4e00\u6b21\u6216\u5168\u90e8\u4f7f\u7528carousel.js\u6587\u4ef6(\u4f7f\u7528\" bootstrap.js\"\u6216\" bootstrap.min.js\")\u3002\n <\/div>\n

\u542f\u52a8Carousel\u793a\u4f8b<\/h2>\n
\n \u8ba9\u6211\u4eec\u4ee5Carousel\u793a\u4f8b\u4e3a\u4f8b\uff0c\u4e86\u89e3\u5982\u4f55\u521b\u5efa\u57fa\u672c\u7684Carousel\u3002\n <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n  <head>\r\n     <title>Bootstrap Carousel<\/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<style>\r\n  .carousel-inner > .item > img,\r\n  .carousel-inner > .item > a > img {\r\n      width: 80%;\r\n      margin: auto;\r\n  }\r\n<\/style>\r\n  <body>\r\n<div class=\"container\"<\/span>>\r\n  <h1>Carousel Example<\/h1>\r\n<div id=\"myCarousel\"<\/span> class=\"carousel slide\"<\/span> data-ride=\"carousel\"<\/span>>\r\n    <!--Indicators-->\r\n    <ol class=\"carousel-indicators\"<\/span>>\r\n      <li data-target=\"#myCarousel\"<\/span><\/span><\/span><\/span><\/span> data-slide-to=\"0\"<\/span> class=\"active\"<\/span>><\/li><\/span>\r\n      <li data-target=\"#myCarousel\" data-slide-to=\"1\"<\/span>><\/li><\/span>\r\n      <li data-target=\"#myCarousel\" data-slide-to=\"2\"<\/span>><\/li><\/span>\r\n    <\/ol>\r\n    <!--Wrapper for <\/span>slides-->\r\n    <div class=\"carousel-inner\"<\/span> role=\"listbox\"<\/span>>\r\n      <div class=\"item active\"<\/span>>\r\n        <img src=\"images\/jokes1.jpg\"<\/span> alt=\"jokes 1\"<\/span> >\r\n      <\/div>\r\n      <div class=\"item\"<\/span><\/span>>\r\n        <img src=\"images\/jokes2.jpg\"<\/span> alt=\"jokes 2\"<\/span> >\r\n      <\/div>\r\n    \r\n      <div class=\"item\">\r\n        <img src=\"images\/jokes3.jpg\"<\/span> alt=\"jokes 3\"<\/span> >\r\n      <\/div>\r\n    <\/div>\r\n    <!--Left and right controls-->\r\n    <a class=\"left carousel-control\"<\/span> href=\"#myCarousel\" role=\"button\"<\/span><\/span> data-slide=\"prev\"<\/span>><\/span>\r\n      <span class=\"glyphicon glyphicon-chevron-left\"<\/span> aria-hidden=\"true\"<\/span><\/span>><\/span>\r\n      <span class=\"sr-only\"<\/span><\/span>>Previous<\/span>\r\n    <\/a>\r\n    <a class=\"right carousel-control\"<\/span> href=\"#myCarousel\" role=\"button\" data-slide=\"next\"<\/span>><\/span>\r\n      <span class=\"glyphicon glyphicon-chevron-right\"<\/span> aria-hidden=\"true\"><\/span>\r\n      <span class=\"sr-only\">Next<\/span>\r\n    <\/a>\r\n<\/div><!--corousel end-->\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 Carousel\u793a\u4f8b: \u5411\u5e7b\u706f\u7247\u6dfb\u52a0\u5b57\u5e55<\/h2>\n
\n    \u5982\u679c\u8981\u5c06\u5b57\u5e55\u6dfb\u52a0\u5230\u5e7b\u706f\u7247\uff0c\u5219\u5fc5\u987b\u6dfb\u52a0<div class=\"carousel-caption\">\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<style>\r\n  .carousel-inner > .item > img,\r\n  .carousel-inner > .item > a > img {\r\n      width: 80%;\r\n      margin: auto;\r\n  }\r\n<\/style>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n  <h1>Carousel Example<\/h1>\r\n<div id=\"myCarousel\"<\/span> class=\"carousel slide\"<\/span> data-ride=\"carousel\"<\/span>>\r\n    <!--Indicators-->\r\n    <ol class=\"carousel-indicators\"<\/span>>\r\n      <li data-target=\"#myCarousel\"<\/span><\/span><\/span><\/span><\/span> data-slide-to=\"0\"<\/span> class=\"active\"<\/span>><\/li><\/span>\r\n      <li data-target=\"#myCarousel\" data-slide-to=\"1\"<\/span>><\/li><\/span>\r\n      <li data-target=\"#myCarousel\" data-slide-to=\"2\"<\/span>><\/li><\/span>\r\n    <\/ol>\r\n    <!--Wrapper for <\/span>slides-->\r\n    <div class=\"carousel-inner\"<\/span> role=\"listbox\"<\/span>>\r\n      <div class=\"item active\"<\/span>>\r\n        <img src=\"images\/jokes1.jpg\"<\/span> alt=\"jokes 1\"<\/span> >\r\n        <h3>Santa-Banta<\/h3>\r\n        <p>Read Santa-Banta jokes at lidihuo.<\/p>\r\n      <\/div>\r\n      <div class=\"item\"<\/span><\/span>>\r\n        <img src=\"images\/jokes2.jpg\"<\/span> alt=\"jokes 2\"<\/span> >\r\n         <h3>Santa-Banta<\/h3>\r\n        <p>Read Santa-Banta jokes at lidihuo.<\/p>\r\n      <\/div>\r\n    \r\n      <div class=\"item\">\r\n        <img src=\"images\/jokes3.jpg\"<\/span> alt=\"jokes 3\"<\/span> >\r\n         <h3>Santa-Banta<\/h3>\r\n        <p>Read Santa-Banta jokes at lidihuo.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n    <!--Left and right controls-->\r\n    <a class=\"left carousel-control\"<\/span> href=\"#myCarousel\" role=\"button\"<\/span><\/span> data-slide=\"prev\"<\/span>><\/span>\r\n      <span class=\"glyphicon glyphicon-chevron-left\"<\/span> aria-hidden=\"true\"<\/span><\/span>><\/span>\r\n      <span class=\"sr-only\"<\/span><\/span>>Previous<\/span>\r\n    <\/a>\r\n    <a class=\"right carousel-control\"<\/span> href=\"#myCarousel\" role=\"button\" data-slide=\"next\"<\/span>><\/span>\r\n      <span class=\"glyphicon glyphicon-chevron-right\"<\/span> aria-hidden=\"true\"><\/span>\r\n      <span class=\"sr-only\">Next<\/span>\r\n    <\/a>\r\n<\/div><!--corousel end-->\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
 <\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Bootstrap Carouselzh-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-1993","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1993"}],"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=1993"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1993\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}