乔乔 2020-01-06
Bootstrap来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的,它简洁灵活,使得web开发更加快捷。
控制权在框架本身,使用者要按照框架所规定的某种规范进行开发
Bootstrap使用四部曲:
在https://v3.bootcss.com/下载bootstrap的压缩文件,解压后将其中的文件夹(css,fonts,js)复制到刚刚建立的bootstrap文件夹下:
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 要求当前页面使用IE浏览器最高版本的内核来渲染 --> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--[if lt IE 9]> 解决ie9以下浏览器对html5新增标签不识别,并导致css不起作用的问题 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 解决ie9以下浏览器对css3 Media Query 的不识别问题 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- 一定不要忘记引入bootstrap的样式文件 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <title>Document</title>
<body> <button type="button" class="btn btn-success">(成功)Success</button> <!-- bootstrap是根据类来创建外观形状 --> <div class="btn btn-success login">登陆</div> <div class="btn btn-danger">未成功</div> </body>
/* 利用我们自己写的样式覆盖原先的样式 */ .login { width: 88px; height: 45px; }
Bootstrap需要为页面内容和栅格系统包裹一个.container容器,Bootstrap预先定义好了这个类,叫.container,它提供两个做此用处的类。(注意:这个类名必须是container,不可更改)
超小屏(100%)
上述宽度都是设定好的,不可以像之前一样任意修改
<body> <!-- 此时拉伸屏幕可以看到container盒子的宽度自动在1170px、970px、750px、100%之间变化 可以与01-响应式布局原理中的代码进行比较 这里省略了媒体查询 实际上媒体查询的部分在bootstrap中定义好了 --> <!-- 注意在bootstrap里面为container定义了一个左右15px的内边距 --> <div class="container">123</div> <!-- 适合于单独移动端开发 不适合响应式开发 --> <div class="container-fluid">abc</div> </body>
超小屏:
大屏:
media="screen and (min-width:641px) and (max-width: 959px)". <%@ page language="java" contentType="t