奇迹969

 

BBOTSTRAP

Bootstrap

第一步:下载

第二步: 解压缩

第三步:引入(head内部  link引入

 

Bootstrap 全局样式

移动设备优先:
<meta name="viewport" content="width=device-width, initial-scale=1">
(需要在<head> 之间添加元数据标签

在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">)


<meta http-equiv="X-UA-Compatible" content="IE=edge">(告诉IE浏览器以最高规格渲染)
 
.c1 {
background-color: red;
padding: 10px 20px;
margin: 0 auto;
height: 100px;
width: 100px;
} margin:0 auto 为 自动居中

一.布局容器
<div class="container">
  ...
</div>
<div class="container-fluid">
  ...
</div>

二.栅格系统


<div class="col-xs-6  c1 col-xs-push-6">
</div>
<div class="col-xs-6 c2 col-xs-pull-6">
</div>
<div class="col-md-6 col-xs-6 c1  col-xs-offset-3">
</div>

一共12列

三.媒体查询
@media screen and (max-width: 700px) {
            .c1 {
                background-color: green;


放 style 里 

@media screen and (max-width: 700px) {
            .c1 {
                background-color: green;


放 style 里 

 

四 嵌套列
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

 










posted on 2019-05-14 16:00  奇迹969  阅读(135)  评论(0编辑  收藏  举报

导航