{"id":1350,"date":"2017-05-17T05:05:49","date_gmt":"2017-05-16T20:05:49","guid":{"rendered":"http:\/\/okamurax.com\/?p=1350"},"modified":"2017-06-20T14:38:59","modified_gmt":"2017-06-20T05:38:59","slug":"bootstrap%e5%9f%ba%e7%a4%8e","status":"publish","type":"post","link":"https:\/\/appbay.org\/?p=1350","title":{"rendered":"Bootstrap\u57fa\u790e"},"content":{"rendered":"

Grid\u30b7\u30b9\u30c6\u30e0\u306b\u3064\u3044\u3066<\/h2>\n

container\u30af\u30e9\u30b9\u3067\u56f2\u3046\u3068\u4f59\u767d\u304c\u3067\u304d\u308b<\/p>\n

\u5168\u4f53\u306e\u6a2a\u5e4512\u306b\u5206\u5272\u3059\u308b\u3068\u8003\u3048\u308b\u3002<\/p>\n

\u5148\u305a\u3001row\u30af\u30e9\u30b9\u3092\u4f5c\u308a\u3001\u305d\u306e\u4e2d\u306b
\ncol-sm-12\u30af\u30e9\u30b9\u306e\u3088\u3046\u306b\u3057\u3066\u8ffd\u52a0\u3044\u304f\u3002<\/p>\n

col-sm-12\u306esm\u306e\u90e8\u5206\u306f\u3001\u8a72\u5f53px\u4ee5\u4e0b\u306e\u3068\u304d\u306b\u9069\u5fdc\u3055\u308c\u308b\u3002
\nxs = auto<\/span>
\n sm = 750px<\/span>
\n md = 970px<\/span>
\n lg = 1170px<\/span>
\n\u304c\u7a2e\u985e\u3002<\/p>\n

hidden-xs
\nvisible-xs
\n\u306e\u3088\u3046\u306b\u8a72\u5f53\u30b5\u30a4\u30ba\u306b\u306a\u308b\u3068\u898b\u305b\u305f\u308a\u6d88\u3057\u305f\u308a\u3082\u3067\u304d\u308b\u3002<\/p>\n

table\u30bf\u30b0<\/h2>\n

table\u30bf\u30b0\u306btable\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u308b\u3060\u3051\u3067\u898b\u305f\u76ee\u304c\u5909\u308f\u308b\u3002
\n\u305d\u306e\u4ed6\u306b\u3082\u3001table\u30af\u30e9\u30b9\u3068\u5408\u308f\u305b\u3066
\ntable-striped\u30af\u30e9\u30b9\uff08\u8272\u5206\uff09
\ntable-bordered\u30af\u30e9\u30b9\uff08\u67a0\u7dda\uff09
\ntable-hover\u30af\u30e9\u30b9\uff08\u30ab\u30fc\u30bd\u30eb\u53cd\u5fdc\uff09
\ntable-condensed\uff08\u7e2e\u5c0f\uff09
\n\u306a\u3069\u304c\u3042\u308b\u3002<\/p>\n

tr\u30bf\u30b0\u3067\u306fwarning\u30af\u30e9\u30b9\u3068\u4ed8\u3051\u308b\u3068\u884c\u306b\u8272\u304c\u4ed8\u304f\u3002<\/p>\n

form\u30bf\u30b0<\/h2>\n

\u5148\u305aform-group\u30af\u30e9\u30b9\u3067\u56f2\u3046\u3002
\n\u305d\u306e\u4e2d\u306blabel\u30bf\u30b0\u3068input\u30bf\u30b0\u3092\u5165\u308c\u308b\u3002
\nlabe\u30bf\u30b0\u306b\u306fcontrol-label\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u3066\u3001
\ninput\u30bf\u30b0\u306b\u306f\u3001form-control\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u308b\u3002<\/p>\n

button\u30bf\u30b0\u306b\u306f\u3001
\nbtn btn-primary\u30af\u30e9\u30b9\u7b49\u3092\u4ed8\u3051\u308b\u3002<\/p>\n

form\u30bf\u30b0\u306bform-inline\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u3068\u6a2a\u4e26\u3073\u3002<\/p>\n

glyphicons\u3068\u30dc\u30bf\u30f3<\/h2>\n

<i class=”glyphicon glyphicon-book”><\/i><\/span>
\n\u306e\u3088\u3046\u306b\u4f7f\u3046\u3002<\/p>\n

btn btn-primary\u30af\u30e9\u30b9\u7b49\u3067\u30dc\u30bf\u30f3\u3068\u306a\u308b\u3002<\/p>\n

\u30dc\u30bf\u30f3\u3092\u30b0\u30eb\u30fc\u30d7\u5316\u30b9\u30eb\u5834\u5408\u3001\u8981\u7d20\u3092
\nbtn-group\u30af\u30e9\u30b9\u3067\u56f2\u3046\u3002<\/p>\n

dropdown<\/h2>\n

\u30dc\u30bf\u30f3\u30b0\u30eb\u30fc\u30d7\u3092\u4f5c\u3063\u3066\u3001\u30dc\u30bf\u30f3\u3092\u5165\u308c\u3066\u3001\u305d\u306e\u30dc\u30bf\u30f3\u306b\u3001
\ndropdown-toggle\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u306e\u3068\u3001
\ndata-toggle\u5c5e\u6027\u306bdropdown\u3092\u4ed8\u3051\u308b\u3002<\/p>\n

\u30e1\u30cb\u30e5\u30fc\u306f\u3001ul\u30bf\u30b0\u306bdropdown-menu\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u308b\u3002<\/p>\n

<button class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown” ><\/span>
\n xxx <span class=”caret”><\/span><\/span>
\n <\/button><\/span>
\n <ul><\/span>
\n <li class=”dropdown-menu”>xxx<\/li><\/span>
\n <\/ul><\/span>
\n\u306e\u3088\u3046\u306a\u611f\u3058\u3002<\/p>\n

\u6700\u5927\u5e45\u3092\u56fa\u5b9a<\/h2>\n

@media(min-width:750px){.container{max-width:750px;}}<\/span>
\n\u3053\u306e\u5834\u5408750px\u3088\u308a\u5927\u304d\u3044\u5834\u5408\u306b\u9069\u7528\u3002<\/p>\n

\u30b0\u30ea\u30c3\u30c9\u306e\u30cd\u30b9\u30c8<\/h2>\n

\u30cd\u30b9\u30c8\u3055\u305b\u308b\u5834\u5408\u3002
\n.row > .col > .row > .col<\/span>
\n\u306b\u3059\u308b\u3002<\/p>\n

\u5b50\u306b\u306a\u3063\u305f\u65b9\u308212\u3067\u5206\u5272\u3055\u308c\u308b\u3002<\/p>\n

\u9069\u5f53\u306b\u5b9f\u9a13<\/h2>\n
<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <title>Bootstrap 101 Template<\/title>\r\n    <link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n    <!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n    <!--[if lt IE 9]>\r\n      <script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n      <script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n    <![endif]-->\r\n  <\/head>\r\n  <body>\r\n\r\n  <?php\r\n  if(array_key_exists(\"n\",$_GET) && $_GET[\"n\"] !== \"\"){\r\n    echo $_GET[\"n\"];\r\n  }\r\n  ?>\r\n\r\n  <div class=\"container\">\r\n  <div class=\"row\">\r\n  <div class=\"col-sm-4\" style=\"background:red;\">\r\n\r\n    <form method=\"get\" class=\"form-horizontal row\">\r\n\r\n      <div class=\"form-group\">\r\n        <label class=\"control-label col-sm-4\">\u540d\u524d<\/label>\r\n        <div class=\"col-sm-8\">\r\n          <input type=\"text\" class=\"form-control\" name=\"n\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"form-group\">\r\n        <div class=\"col-sm-offset-4 col-sm-12\">\r\n          <input type=\"submit\" class=\"btn\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/form>\r\n\r\n  <\/div>\r\n  <div class=\"col-sm-8\" style=\"background:gray;\">right<\/div>\r\n  <\/div>\r\n  <\/div>\r\n\r\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.4\/jquery.min.js\"><\/script>\r\n    <script src=\"js\/bootstrap.min.js\"><\/script>\r\n\r\n  <\/body>\r\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
Grid\u30b7\u30b9\u30c6\u30e0\u306b\u3064\u3044\u3066 container\u30af\u30e9\u30b9\u3067\u56f2\u3046\u3068\u4f59\u767d\u304c\u3067\u304d\u308b \u5168\u4f53\u306e\u6a2a\u5e4512\u306b\u5206\u5272\u3059\u308b\u3068\u8003\u3048\u308b\u3002 \u5148\u305a\u3001row\u30af\u30e9\u30b9\u3092\u4f5c\u308a\u3001\u305d\u306e\u4e2d\u306b col-sm-12\u30af\u30e9\u30b9\u306e\u3088\u3046\u306b\u3057\u3066\u8ffd\u52a0\u3044\u304f\u3002 col-sm-12\u306esm\u306e\u90e8 … <\/p>\n
“Bootstrap\u57fa\u790e” \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1350","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/posts\/1350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/appbay.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1350"}],"version-history":[{"count":5,"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/posts\/1350\/revisions"}],"predecessor-version":[{"id":1356,"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/posts\/1350\/revisions\/1356"}],"wp:attachment":[{"href":"https:\/\/appbay.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appbay.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appbay.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}