响应式开发之Bootstrap

发表于2020-04-25更新于2020-04-25

学习视频：html响应式布局解析之pink老师

响应式尺寸

屏幕 尺寸范围 通常设置
超小屏幕（手机） < 768px 100%
小屏幕（平板） >= 768px 750px
中等屏幕（桌面显示器） >= 992px 970px
大屏幕（大桌面显示器） >= 1200px 1170px

原始方法

都要在头文件中添加，适配手机端

1
<meta name="viewport" content="width=device-width,initial-scale = 1.0">
  • 第一种：在style中设置
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
  @media(min-width:400px) and (max-width: 600px){
    div{
      background: #f00;
    }
  }
  @media(min-width:600px) and (max-width: 800px){
    div{
      background: #0f0;
    }
  }
</style>
  • 第二种：引入外部css
1
2
3
<link href="文件名1" media="(min-width=500px) and (max-width=800px)" rel="stylesheet" type="text/css">
<link href="文件名2" media="(min-width=800px) and (max-width=1200px)" rel="stylesheet" type="text/css">
<link href="文件名3" media="(min-width=1200px) " rel="stylesheet" type="text/css">

Bootstrap栅栏系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>模拟响应式</title>
  <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css">
  <style type="text/css">
    div{
      border: #f00 solid 1px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
    </div>
  </div>
</body>
</html>

嵌套

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="row">
          <div class="col-lg-4">1</div>
          <div class="col-lg-4">2</div>
          <div class="col-lg-4">3</div>
        </div>
      </div>
    </div>
</div>

列排序push/pull

1
2
3
4
<div class="row">
      <div class="col-lg-4 col-lg-push-8">1</div>
      <div class="col-lg-8 col-lg-pull-4">2</div>
</div>

列偏移offset

1
<div class="col-lg-4 col-lg-offset-4"></div>

隐藏hidden

1
<div class="col-lg-4 hidden-md">2</div>

学习视频玩转Bootstrap-表严肃

按钮

样式

类名 功能
btn 声明按钮
btn-default 默认 灰白
btn-primary 主要 深蓝
btn-success 成功 浅绿
btn-danger 危险 淡红
btn-info 信息 浅蓝
btn-warning 警告 浅黄

大小

类名 功能
btn-lg 大
空 默认、中
btn-sm 小
btn-xm 超小

按钮组

类名 功能
btn-group 水平按钮组
btn-group-vertical 垂直按钮组
btn-toolbar 嵌套按钮组

表单form

1
2
3
4
5
6
7
8
9
10
11
  <form class="container">
    <div class="form-group">
      <label class="control-label">用户名</label>
      <input class="form-control" type="text" name="username">
    </div>
<!-- 前置图标 -->
    <div class="input-group">
      <div class="input-group-addon">￥</div>
      <input class="form-control" type="text"></input>
    </div>
  </form>

导航

类名 作用
nav 声明导航
nav-tabs 标签导航
nav-pills 胶囊式导航
nav-justified 平分宽度
nav-stacked 竖形

导航栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="container">
   <div class="navbar navbar-default">
   <div class="navbar-header">
     <a href="/" class="navbar-brand">首页</a>
     <a href="/" class="navbar-brand">产品</a>
   </div>
       
   <form class="navbar-form navbar-left">
     <div class="form-group">
       <input type="text" name="" class="form-control">
     </div>
     <button type="submit" name="搜索" class="btn btn-default">搜索</button>
    </form>
       
   <div class="navbar-header navbar-right">
     <a href="" class="navbar-brand">登录</a>
     <a href="" class="navbar-brand">注册</a>
   </div>
 </div>
 </div>

面板

类名 作用
panel 声明面板
panel-default 默认面板
panel-success 绿色面板
panel-heading 面板头部
panel-body 面板身体
panel-footer 面板底部

表格

类名 作用
table 声明表格
table-striped 黑白相间
table-hover 鼠标位变色
table-bordered 加边框

分页

类名 作用
pagination 分页
pager 上下页
active 当前击中
disabled 不可点击

路径导航

1
2
3
4
5
<div class="breadcrumb">
    <li><a href="">首页</a></li>
    <li><a href="">文章</a></li>
    <li class="active"><span >helloworld</span>
</div>

标签

1
2
3
4
5
<p>
  <label class="label label-success">有趣</label> 
  <label class="label label-success">有趣</label> 
  <label class="label label-success">有趣</label> 
</p>

数字统计(点赞数)

1
2
3
<button class="btn btn-success">
    赞<span class="badge">20</span>
</button>

弹出框

1
2
3
<div class="alert alert-danger">
        危险
</div>

列表组

1
2
3
4
<div class="list-group">
  <a href="" class="list-group-item">123</a>
  <a href="" class="list-group-item">123</a>
</div>