Bootstrap模板代码+页面自适应页面的案例代码

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               
<html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap 101 Templatetitle>        <link href="css/bootstrap.min.css" rel="stylesheet">                <style type="text/css">     @media only screen and (min-width: 100px) and (max-width: 400px) {      #test{       height:100px;       width:100px;       background: red;      }     }     @media only screen and (min-width: 400px) and (max-width: 600px) {      #test{       height:300px;       width:300px;       background:green;      }     }     @media only screen and (min-width: 600px) and (max-width: 800px) {      #test{       height:600px;       width:600px;       background: yellow;      }     }    stylehead<body>    <h1>Hello, world!h1>        <div id="test">测试内容div>            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">script>        <script src="js/bootstrap.min.js">scriptbody>html>

页面显示截图:

符合条件一的时候显示的效果:

2:符合条件二的时候显示的效果:

你可能感兴趣的:(Bootstrap模板代码+页面自适应页面的案例代码)