{"id":498,"date":"2021-08-18T23:23:38","date_gmt":"2021-08-18T14:23:38","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=498"},"modified":"2022-12-31T01:14:42","modified_gmt":"2022-12-30T16:14:42","slug":"bootstrap5","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2021\/08\/18\/bootstrap5\/","title":{"rendered":"Bootstrap\u306e\u307e\u3068\u30815(\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6)"},"content":{"rendered":"
\n

\u30b0\u30ea\u30c3\u30c9\u30aa\u30d7\u30b7\u30e7\u30f3(\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6)<\/h3>\n
\n

HTML\u306e\u8a18\u8ff0<\/h3>\n
\n
<!DOCTYPE html>\r\n <html lang=\"ja\">\r\n <head>\r\n \u00a0 <meta charset=\"utf-8\">\r\n \u00a0 <title>\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0<\/title>\r\n \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\r\n \u00a0 <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/css\/bootstrap.min.css\" integrity=\"sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb\" crossorigin=\"anonymous\">\r\n \u00a0 <style>\r\n \u00a0 \u00a0 .orange {\r\n \u00a0 \u00a0 \u00a0 background-color: orange;\r\n \u00a0 \u00a0 \u00a0 border: black 1px solid;\r\n \u00a0 \u00a0 }\r\n \u00a0 <\/style>\r\n <\/head>\r\n <body>\r\n \u00a0 <div class=\"container\">\r\n \u00a0 \u00a0 <!-- Grid option -->\r\n \u00a0 \u00a0 <div class=\"row\">\r\n \u00a0 \u00a0 \u00a0 <div class=\"col orange\">A<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col orange\">B<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col orange\">C<\/div>\r\n \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 <div class=\"row\">\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-sm orange\">A<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-sm orange\">B<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-sm orange\">C<\/div>\r\n \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 <div class=\"row\"> \r\n  \u00a0 \u00a0  <div class=\"col-lg orange\">A<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg orange\">B<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg orange\">C<\/div>\r\n \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 <div class=\"row\">\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 orange\">1<\/div>\r\n \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 <div class=\"row\">\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-1 col-md-2 orange\">1<\/div>\r\n \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 <!-- \u5165\u308c\u5b50 -->\r\n \u00a0 \u00a0 <div class=\"row\">\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-sm-9 orange\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 Level 1: 9\r\n \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"row\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"col-sm-8 orange\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Level 2: 8 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n          <\/div> \u00a0 \u00a0 \u00a0 \u00a0  \r\n     <div class=\"col-sm-4 orange\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Level 2: 4\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-sm-3 orange\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 Level 1: 3\r\n \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 <\/div>\r\n \u00a0 <\/div>\r\n \u00a0 <script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.slim.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr\/rE9\/Qpg6aAZGJwFDMVNA\/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\">\r\n<\/script>\r\n \u00a0 <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.3\/umd\/popper.min.js\" integrity=\"sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh\" crossorigin=\"anonymous\">\r\n<\/script>\r\n \u00a0 <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/js\/bootstrap.min.js\" integrity=\"sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ\" crossorigin=\"anonymous\">\r\n<\/script>\r\n <\/body>\r\n <\/html><\/code><\/pre>\n<\/div>\n
\u203b\u30dd\u30a4\u30f3\u30c8<\/span><\/p>\n<\/div>\n<\/div>\n
\n
    \n
  • class = \u201ccontainer\u201d\uff08\u56fa\u5b9a\u67a0\uff09\u304b\u201dcontainer-fluid\u201d\uff08\u6d41\u52d5\u67a0\uff09\u306e\u4e2d\u306b\u66f8\u304f<\/li>\n
  • class = \u201crow\u201d\u306e\u4e2d\u306b\u66f8\u304f<\/li>\n
  • class = \u201ccol-{prefix}-{columns}\u201d\u306e\u5f62\u3067\u66f8\u304f\u3053\u3068<\/li>\n
  • class = {columns}\u306f\u5408\u8a08\u304c12\u306b\u306a\u308b\u3088\u3046\u306b\u3059\u308b<\/li>\n<\/ul>\n
    \u88dc\u8db3\uff1aprefix\u306fsm,lg,md,\u306a\u3069\u306e\u6c7a\u3081\u3089\u308c\u305f\u753b\u9762\u5e45\u3092\u4e0b\u56de\u3063\u305f\u6642\u8868\u793a\u3092\u5909\u3048\u308b\u6307\u5b9a\u3067xs(\u30b9\u30de\u30db\u306a\u3069\u301c767px)\u304b\u3089lg(PC\u5927\u753b\u97621120px~)\u3068\u306a\u3063\u3066\u3044\u308b<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    \u30b0\u30ea\u30c3\u30c9\u30aa\u30d7\u30b7\u30e7\u30f3(\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6) HTML\u306e\u8a18\u8ff0 <!DOCTYPE html> <html lang=”ja”> <head> \u00a0 <meta charset=”utf-8″ […]<\/p>\n","protected":false},"author":1,"featured_media":495,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2,27],"tags":[],"class_list":["post-498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-programming-note"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t