bootstrap响应式网页

客官°小女子只卖身不卖艺 2022-06-15 06:08 263阅读 0赞

# 相应式网页 #

**bootstrap中文版：http://www.bootcss.com/**

**bootstrap英文版：https://getbootstrap.com/getting-started/**

**什么是响应式网页？**

一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。

## **相应式网页的三个特征：** ##

1.流式布局

2.可伸缩的图片可字体

3.CSS3 Media Query

## 如何编写响应式网页： ##

1.设置viewport元标签

\-width：视口的宽度，可以取值为数值，或device-width

\-height:视口的高度，一般不指定

\-initial-scale:初始时的缩放倍率

\-minimum-scale:允许的最小缩放倍率

\-maximum-scale:允许的最大缩放倍率

\-user-scalable:是否允许用户手动缩放，可取值1/0/yes/no

2.使用相对单位（px）代替绝对单位(%、aut、em)

3.流式布局

使用float

4.使用自适应图片：\{img max-width:100%\}

会随着容器的改变而改变，且不超过图片自身的大小

5.根据浏览器屏幕的特征，有选择性的执行某些CSS样式--CSS媒体查询技术（media query）

作用：根据客户端浏览设备的特性，有选择性的执行部分CSS

media：指浏览网页的设备 ，如screen（pc/pad/phone）、print、tv、projection屏幕阅读器

query：查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩位深、

方向Orientation （Landscape/Portrait），根据这些特性，执行特定的CSS

CSS3 mediaquery有两种用法：

1.根据媒体的特性，加载不同的外部CSS

2.根据媒体的特性，执行某段CSS中的部分内容

@media screen and (min-width:990px){
        h1{
            text-align: center;
            font-size: 3em;
            border-bottom: 3px solid #cccccc;
        }
        .box{
            border:1px solid #3a3;
            background: #dfd;
            color: #282;
            padding: 8px;
        }
    }

## 如何测试响应式网页： ##

1.使用真实物理设备---效果可靠但任务量太大

只要手机/平板/电脑在同一个局域网/互联网即可测试

2.使用第三方模拟器软件测试

3.使用浏览器提供的设备模拟器测试---最简单但有时测试效果与真实物理设备有所不同，需要进一步验证

# Bootstrap起步程序： #

## 起步代码： ##

<!DOCTYPE html>
    <html lang="zh-CN">
      <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 Template</title>
    
        
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        
        
        
      </head>
      <body>
        <h1>你好，世界！</h1>
    
        
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>

## 代码解读： ##

2. ![Center][]

# Bootstrap基础知识： #

jQuery是一个js框架

jQueryUI是一个HTML组件库

Twitter Bootstrap是一个HTML/CSS/JS框架，适用移动设备优先的响应式网页

Bootstrap V2版本：面向PC进行了样式设定，同时兼顾pad和phone

Bootstrap V3版本：面向phone进行样式设定，同时兼顾PC

主要涉及：

1.HTML：为HTML5已有的标签扩展了一些自定义属性  data-\*

2.CSS：CSS Reset + 几千个class

3.JS：基于jQuery提供了十几个插件函数

## 内容五部分： ##

1.起步：下载、 模板、bootlint、示范、禁用响应式

2.全局CSS：

按钮：.btn  .btn-default

图片：.img-rounded  .img-circle  .img-thumbnail  .img-responsive

文本：.text-五种 .bg-五种 .test-left/right/center/justify

排版和代码：  .list-unstyle   .list-inline

\------------------------------------------------------------------------------------------------

表格:   .table .table-bordered .table-responsive  .table-striped .table-hover

栅格布局系统：  .container    .container-fluild

.row 里只能放 .col

.col-xs-\*  .col-sm-\*  .col-md-\*   .col-lg-\*

.hidden-xs  .hidden-sm  .hidden-md  .hidden-lg

.col-xs-offset-\*  .col-md-offset-\*  .col-md-offset-\*   .col-md-offset-\*

表单：

3.组件： 图标字体、下拉菜单、按钮组、导航、面包屑、分页、标签、徽章、水井、巨幕、页头、导航条

4.JS插件：

5.定制：

## CSS补充知识点： ##

### 1.盒子模型计算： box-sizing ###

div\{

box-sizing： content-box；//默认值

box-sizing： border-box；

content-box：一个盒子的总宽度：margin+border+padding+width

border-box：一个盒子的总宽度：margin+width（border+padding）

### 2.Bootstrap 全局CSS样式--按钮--简单有趣 ###

.btn\{padding:  ;border:  ;\}

.btn-default\{color:  ;background:  ;border-color:  ;\}

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

.btn-danger\{padding:  ;border:  ;\}红色

.btn-sucess\{padding:  ;border:  ;\}绿色

.btn-warning\{padding:  ;border:  ;\}黄色

.btn-info\{padding:  ;border:  ;\}浅蓝色

.btn-primary\{padding:  ;border:  ;\}深蓝色

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

.btn-lg   大按钮

.btn-sm   小按钮

.btn-xs   超小按钮

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

.btn-block 块级按钮

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

.pull-left  \{float:left;\}   左浮动按钮

.pull-right   \{ffloat:right;\} 右浮动按钮

### 3.Bootstrap 全局CSS样式--图片--简单有趣 ###

.img-rounded   圆角图

.img-circle     圆形图

.img-thumbnail   缩略图

.img-responsive   响应式图片

### 4.Bootstrap 全局CSS样式--排版和代码--仅作了解 ###

http://write.blog.csdn.net/postedit/72735945

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

<mark> 标记文本

<del>被删除的文本       /            <s>无用的文本

<ins>插入文本       /         <u>带下划线的文本

<small>小号文本（父容器大小的85%）

<strong>强调文本（加粗）

<em>斜体文本

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

.text-left 左对齐

.text-right 右对齐

.text-center 中间对齐http://write.blog.csdn.net/postedit/72735945

.text-justify  两端调整对齐

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

.text-uppercase  大写字母

.text-lowercase  小写字母

.text-capitalize  首字母大写

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

.list-unstyle

.list-inline

### 5.Bootstrap 全局CSS样式--表格--简单有趣 ###

<table> 
 <tbody> 
  <tr> 
   <td>Bootlin:<br> 是一个js，由Bootstrap官方提供，用于检测使用bootstrap的页面中常见的HTML错误、class使用方式的错误----默认情况下浏览器是检测不出来的。</td> 
  </tr> 
 </tbody> 
</table>

.table  加内边框

.table-bordered  加外围边框的表格

.table-responsive  响应式表格  注意：使用在table的父元素div上，不是直接使用在table标签中

.table-striped   隔行变色的表格

.table-hover   带悬停效果的表格

### 6.Bootstrap 全局CSS样式--栅格布局系统--最重点 ###

web开发中页面布局可以采用的方式：

1.使用table布局

优势：简单不易出错           不足：加载效率低

2.使用div+CSS做布局

优势：加载速度快、灵活     不足：不易控制

3.使用bootstrap提供的栅格（Grid Layout）布局系统

优势：加载速度快、灵活、支持响应式功能、容易控制（有行/列的概念，但使用div+css实现）

**栅格布局系统的特点：**

3.1 所有行必须放在容器中：.container  或  .container-fluid

3.2 分为多行（row），一行平均分为12列（col）

3.3网页内容只能放在列（col）中，不能直接放在行（row）中

<table> 
 <tbody> 
  <tr> 
   <td>.container的宽度</td> 
  </tr> 
  <tr> 
   <td>当屏幕宽度&gt;1200px(超大PC显示器-lg):&nbsp; 容器宽1170px</td> 
  </tr> 
  <tr> 
   <td>当屏幕宽度&gt;992px(普通PC显示器-md):&nbsp; 容器宽970px</td> 
  </tr> 
  <tr> 
   <td>当屏幕宽度&gt;768px(平板显示器-sm):&nbsp; 容器宽750px</td> 
  </tr> 
  <tr> 
   <td>当屏幕宽度&lt;768px(手机PC显示器-xs):&nbsp; 容器宽auto 
    <table> 
     <tbody> 
      <tr> 
       <td>.container-fluid的宽度</td> 
      </tr> 
     </tbody> 
    </table> width:auto;&nbsp; +before +after<br> </td> 
  </tr> 
 </tbody> 
</table>

![Center 1][]

![Center 2][]

**bootstrap容器的特点：**

1》宽度做了媒体查询

2》添加了前置和后置内容生成，可以防止子元素的越界、浮动造成的影响

3》网页内容只能放在列（col）中，不能直接放在行（row）

4》可以在col中在嵌套row

5》col分为四大类：col-xs,col-sm,col-md,col-lg

6》col-md-\*   \*值可分为1~12，值就位某个列的宽度的（\*/12）

7》可以为一个列指定不同屏幕下的不同宽度

8》col-lg-\* 只对大PC屏幕有效

col-md-\* 对普通PC和大PC屏幕有效

col-sm-\* 对普通PC、大PC、平板屏幕有效

col-xs-\*  对普通PC、大PC、平板、手机屏幕有效

9》hidden-lg 当前列只在大PC屏幕下隐藏

hidden-md 当前列只在PC屏幕下隐藏

hidden-sm 当前列只在平板屏幕下隐藏

hidden-xs 当前列只在手机屏幕下隐藏

10》.col-lg-offset-\*只对大PC屏幕偏移有效

.col-md-offset-\* 对普通PC和大PC屏幕偏移有效

.col-md-offset-\*  对普通PC、大PC、平板屏幕偏移有效

.col-md-offset-\*  对普通PC、大PC、平板、手机屏幕偏移有效

### 7.Bootstrap 全局CSS样式--表单--次重点&最难    ###

bootstrap表单分为三种：

1》默认表单

![Center 3][]

<form >
        <div class="form-group">
            <label class="control-label" for="uname">用户名：</label>
            <input id="uname" class="form-control" type="text">
            <span class="help-block">用户名长度在6~12之间</span>
        </div>
         <div class="checkbox">
            <label>
                <input type="checkbox">我接受本站的使用条款
            </label>
        </div>       <input class="btn btn-warning" type="button" value="提交">
        <input class="btn btn-success" type="button" value="清空">
     
     
     
     
     </form>
     
     
     2》行内表单
     
     
     <h1>行内表单</h1>
    <form class="form-inline" action="">
        <div class="form-group">
            <label  for="uname" class="control-label">用户名：</label>
            <input id="uname" class="form-control" type="text">
        </div>
        <div class="form-group">
            <label class="control-label" for="uname">密码：</label>
            <input id="uname" class="form-control" type="text">
        </div>
        <input class="btn btn-warning" type="button" value="登录">
    </form>
    
     
     3》水平表单 
         
     <form class="form-horizontal" action="">
        <div class="form-group">
            <div class="col-md-1">
                <label  for="uname" class="control-label">用户名：</label>
            </div>
            <div class="col-md-5">
                <input id="uname" class="form-control" type="text">
            </div>
            <div class="col-md-3">
                <span class="help-block">用户名长度在6~12之间</span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-1">
                <label class="control-label" for="uname">密码：</label>
            </div>
            <div class="col-md-5">
                <input id="uname" class="form-control" type="text">
            </div>
            <div class="col-md-3">
                <span class="help-block">密码中必须包含数字，字母</span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">我接受本站的使用条款
                    </label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <input class="btn btn-warning" type="button" value="提交">
                <input class="btn btn-primary" type="button" value="清空">
            </div>
        </div>
    </form>

[Center]: /images/20220615/1844b6b62fb44d4fbd23871d25d70620.png
[Center 1]: /images/20220615/28f415da2df0417687863b424643afbe.png
[Center 2]: /images/20220615/3656eb0a20ed4f0e90915c80f1aa99ba.png
[Center 3]: /images/20220615/48b0327ab52a4cae933661bd3f7b7182.png