boostrap原理.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <div class="container bg-danger" style="height:400px ;"> </div> <style type="text/css"> .bg-danger{ background: pink; } .container{ width: 100%; margin: 0 auto; } @media only screen and (min-width: 576px) { .container{ max-width: 540px; } } @media only screen and (min-width: 768px) { .container{ max-width: 720px; } } @media only screen and (min-width: 992px) { .container{ max-width: 960px; } } @media only screen and (min-width: 1200px) { .container{ max-width: 1140px; } } </style> </body> </html>