移动Web学习08-响应式布局&bootstrap的使用

最新推荐文章于 2024-04-30 15:44:23 发布
最新推荐文章于 2024-04-30 15:44:23 发布
阅读量869 收藏 26
点赞数 27
文章标签： 前端 学习 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45052183/article/details/138002498
版权

2、响应式布局

2.1、什么响应式布局

响应式布局是一种网页设计的方法，能够使网站在不同的设备上（如桌面电脑、平板电脑、手机等）呈现出最佳的用户体验。其核心思想是使网页能够根据用户的设备和屏幕尺寸自动调整布局和内容，以适应不同的屏幕大小和分辨率。

根据获取屏幕的宽度、调整页面布局、其核心就是利用媒体查询、让对应的css生效、来达到响应式的效果

例如 https://alloyteam.com/ 腾讯全端这个网站、他只有一个页面、在不同设备下、进行来回的相应。

市面上如京东、淘宝、他们都是有两个团队、开发了两套页面，其目的是、给与用户更好的体验。但是非常的耗费开发成本。

2.2、媒体查询

我们实现响应式布局的核心就是采用媒体查询动态的监听、我们视口的宽度，来达到响应式的效果

前面讲移动端适配的时候我们学习过了媒体查询，只不过当时我们写的都是固定的值，如下

@media(width:1000px){
  body{
     background-color:pink
  }
}

缺点是，我正好是1000的时候变化，或者800的时候变化、那八百到1000怎么办？

我们能不能写一个范围值

开发当中的常用写法 max-width 最大宽度 / min-width 最小宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          /* @media (width:1000px) {
            body{
                background-color: pink;
             }
          } */
          /* 视口宽度小于等于768px,网页颜色为绿色 d最大是768px */
          @media(max-width:768px){
            body{
                background-color: pink;
             }
          }
          /* 视口的宽度大于等于1200，网页颜色为红色 */
          @media(min-width:1200px){
            body{
                background-color: red;
            }
          }
    </style>
</head>
<body>
     <!-- 小于等于用max-width  大于等于用min-width -->
</body>
</html>

2.3、媒体查询的顺序问题

同时满足两个、后写的的样式层叠掉写先写的样式、比如、1300满足大于1200、也满足大于900，因为900这个是后写的所以1200设置的这个媒体查询不会生效

写min-width 从小到大、写max-width 从大到小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 如果我们，我们先设置了最小宽度是red,就是小于等于1200w往下的都是红色，你会发现，red没了，
           假如你宽度为900，他满足大于等于1200，有满足，大于等于992， 原因是样式层叠了*/
        /* 视口宽度>=1200px 背景颜色为红色 */
        @media(min-width:1200px){
            body{
                background-color: red;
            }
        }
        /* 视口宽度<768px  背景颜色为黄色  */
        @media(max-width:768px){
            body{
                background-color: yellow;
            }
        }
        /* 视口宽度>=768px  背景颜色为粉色 */
        @media(min-width:768px){
            body{
                background-color: pink;
            }
        }
        /* 视口宽度>=992px  背景颜色为蓝色 */
        @media(min-width:992px){
            body{
                background-color: blue;
            }
        }
    
    </style>
</head>
<body>
    
</body>
</html>

2.4、媒体查询完整写法

@media mediatype and|not|only (media feature){
  css-code;
}

关键词

and：用于将多个媒体查询规则组合成单条媒体查询

not：用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。

only：仅在整个查询匹配时才用于应用样式。

, (逗号)：逗号用于将多个媒体查询合并为一个规则。

<style>
	/*比如下面表示：屏幕宽度大于500，小于700的时候，body背景颜色为红色；*/
    @media (min-width: 500px) and (max-width: 800px) {
      body {
        background-color: orange;
      }
    }
</style>

媒体类型

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

image-20240420022133730

媒体特征

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

image-20240420022203281

2.5、外链式媒体查询

格式：

<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css">

例子：

<link rel="stylesheet" href="./one" media="screen and (min-width:992px)">
<link rel="stylesheet" href="./one" media="screen and (min-width:120px)">

媒体查询通常配合rem来使用

2.6、京东盒子隐藏案例

image-20240420122018979

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1190px;
            height: 480px;
            background-color: pink;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            margin-top: 100px;
        }
        .a1{
            width: 190px;
            height: 480px;
            background-color: yellow;
        }
        .a2{
            width: 590px;
            height: 480px;
            background-color: skyblue;
        }
        .a3{
            width: 190px;
            height: 480px;
            background: purple;
        }
        .a4{
            width: 190px;
            height: 480px;
            background-color: red;
        }
        /* 小于等于1348px时，我们就让a3这个盒子消失 */
        @media (max-width: 1348px) {
            .a3{
                display: none;
            }
            .box{
                width: 990px;
            }
        }
    </style>
</head>
<body>
     <div class="box">
         <div class="a1"></div>
         <div class="a2"></div>
         <div class="a3"></div>
         <div class="a4"></div>
     </div>
</body>
</html>

2.7、bootstrap概述

1、UI框架的基本概念

什么是UI框架

将常见效果进行统一封装后形成的一套代码，例如：BootStrap

UI框架的作用

基于框架开发，效率高、稳定性高

BootStrap的作用

主要是做我们响应式网站的开发

2、Bootstrap简介

Bootstrap是由Twitter公司开发维护的前端UI框架，他提供了大量==编写好的CSS样式，允许开发者结合一定的HTML结构==及JavaScript,快速编写功能完善的网页

及常见的交互效果

中文官网：https://www.bootcss.com/

现在的Bootstrap已经出到第五个版本了，但是我们一般用的话还是用Bootstrap5，原因是他比较稳定

3、Bootstrap下载

image-20240420124543624

生产环境用第一个、因为是压缩过的，上传下载速度回很快、如果你要看源码，就第二个、如果说你有Sass项目要用他，就用第三个

下载下来的目录结构

image-20240420125439971

2.8、bootstrap初体验

运行如下代码你会发现、我们并没有给div设置宽度、但是他不是一个通栏的盒子、这是因为，bootstrap给他设置了，盒子的宽度

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入bootstrap文件 -->
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        .container{
            height: 40px;
            background-color: pink;
        }
    </style>
</head>
<body>
     <div class="container"></div>
</body>
</html>

2.9、bootstrap栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

简述为栅格化是指将网页的宽度分成若干等份，BootStrap3默认将网页分成了12等份

image-20240420151001288

栅格系统(grid systems),也叫“网格系统，它是通过一系列的行（row）与列（column）的组合创建页面布局。 我们的内容可以直接放入BootStrap栅格系统面。

image-20240420151106714

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入bootstrap文件 -->
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        .container div{
            height: 50px;
            background-color: pink;
        }
        
    </style>
</head>
<body>
     <div class="container">
        <!-- 在大屏幕下面、一行显示四个 -->
        <!-- 在中等屏幕下面、一行显示两个 -->
        <!-- 在小屏幕下面，一行显示一个 -->
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">2</div>
        <div class="col-lg-3 col-md-6 col-sm-12">3</div>
        <div class="col-lg-3 col-md-6 col-sm-12">4</div>
     </div>
</body>
</html>

container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

image-20240420152418082

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        .container{
            height: 50px;
            background-color: pink;
        }
        .container-fluid{
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
     <!-- 版心盒子 有宽度，且居中 -->
     <div class="container">111</div>
     <!-- 通栏的盒子 注意：左右自带padding值15px  css3的盒子模型：box-sizing:border-box;边框往内收-->
     <div class="container-fluid">222</div>
     
</body>
</html>

分别使用.row类名和 .col类名定义栅格布局的行和列。

image-20240420152935817

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        .container{
            height: 50px;
            background-color: pink;
        }
        .container-fluid{
            height: 50px;
            background-color: blue;
        }
        .abc{
            background-color: red;
            height: 50px;
        }
        .abc div{
            height: 50px;
            background-color: yellow;
        }
    </style>
</head>
<body>
     <!-- 版心盒子 有宽度，且居中 -->
     <div class="container">111</div>
     <!-- 通栏的盒子 注意：左右自带padding值15px  css3的盒子模型：box-sizing:border-box;边框往内收-->
     <div class="container-fluid">222</div>
     
     <div class="container abc">
        <!-- row 会把container的padding值去掉 -->
        <div class="row">

        </div>
    </div>
</body>
</html>

2.1、使用全局样式

BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。

网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

全局样式分为、布局样式和内容美化样式，

按钮样式

  • btn : 基准样式
  • btn-info; btn-success : 设置按钮背景色
  • btn-block : 设置按钮为块元素
  • btn-lg; btn-sm; btn-xs : 设置按钮大小
<button class="基本样式类，具体样式类">成功</button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        .container{
            margin-top: 100px;
            /* height: 50px;
            background-color: pink; */
        }
    </style>
    </style>
</head>
<body>
    <div class="container">
         <!-- 表示成功或积极的操作 -->
        <button type="button" class="btn btn-success">（成功）Success</button>
    </div>
</body>
</html>

image-20240420155201286

表格

  • table : 基本类名, 初始化表格默认样式
  • table-bordered : 边框线
  • table-striped : 隔行变色
  • table-hover : 鼠标悬停效果
  • table-responsive : 表格宽溢出滚动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-striped  table-hover">
          <!-- 表头类名 -->
          <tr class="table-success">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
          </tr>
          <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>20</td>
            <td>女</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>18</td>
            <td>男</td>
          </tr>
          <tr>
            <td>赵六</td>
            <td>20</td>
            <td>女</td>
          </tr>    
    </table>
</body>
</html>

image-20240420155252839

表单

form-control : 设置表单元素input, select, textarea的样式

checkbox 和 radio : 设置复选框和单选框的样式

form-inline : 设置表单元素水平排列

disabled : 设置表单禁用状态样式

input-lg; input-sm, input-sm : 设置表单元素的大小

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

image-20240420155422872

图片美化

  • img-responsive: 图片自适应
  • img-rounded : 图片设置圆角
  • img-circle : 图片设置正圆
  • img-thumbnail : 图片添加边框线

image-20240420155744651

布局辅助类

  • pull-right : 强制元素右浮动
  • pull-left : 强制元素左浮动
  • clearfix : 清除浮动元素的影响
  • text-left文 : 本左对齐
  • text-right : 文本右对齐
  • text-center : 文本居中对齐
  • center-block : 块元素居中

布局响应式工具

  • 不同屏幕尺寸隐藏或显示页面内容

image-20240420160033346

2.2、组件

什么是组件？

所谓组件就是：BootStrap提供的常见功能，包含了HTML结构和CSS样式。

使用方式？

引入BootStrap样式

复制结构，修改内容

image-20240420160242485

其中包含例如、轮播图组件、导航组件、代码过去简单不在粘贴

2.3、字体图标

Glyphicons字体图标的使用步骤

  • HTML页面引入BootStrap样式文件
  • 空标签调用对应类名
    • glyphicon
    • 图标类
<!DOCTYPE html>
<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.0" />
    <title>字体图标</title>
    <link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
    <style>
      .bi-android2 {
        font-size: 100px;
        color: green;
      }
    </style>
  </head>
  <body>
    <span class="bi-android2"></span>
  </body>
</html>

2.4、插件

BootStrap提供的常见效果, 包含了HTML结构，CSS样式与JavaScript

image-20240420160921362

插件的使用步骤

  • 引入BootStrap样式
  • 引入js文件：jQuery.js + BootStrap.min.js

image-20240420161015243

复制HTML结构, 并适当调整结构或内容

2.5、定制

我们可以能够根据项目需求定制bootstrap框架

导航菜单 → 定制

输入目标变量值

编译并下载，使用定制后的框架

image-20240420161116507

都是数据而已
关注
  • 27
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
03-bootstrap-响应式布局-栅格系统
记录java学习日常~
05-25 2669
行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。
谈一谈bootstrap响应式布局
01-19
随着移动端的用户越来越多，传统的web系统架构无法兼容很多移动终端的正常使用。在工作中也会发现，现在很多的客户都有在手机、平板等移动终端上使用管理系统的需求。如果单独为每一个终端开发相应的响应网页，这必定增加项目的成本和开发人员的压力。这时候了解响应式布局就很有必要，响应式布局就是为解决多终端问题而生的。本次介绍的是轻量级、开源的、免费的bootstrap。 搭建开发环境 首先下载官网的boostrap源码包：http://www.bootcss.com/. 开发简单的项目不必加入源码中的所有css、js和字体等。根据自己的项目需求可以裁剪出自己需要的环境。 必须的文件有以下几个：jquer
响应式布局——Bootstrap
m0_45659764的博客
04-06 8925
二、BootStrap 1.1 BootStrap简介 目标：使用BootStrap框架快速开发响应式网页 Bootstrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及Javascript，快速编写功能完善网页及常见交互效果 中文官网：https://www.bootcss.com/ 1.2 BootStrap使用步骤 目标：使用Bootstrap框架快速布局响应式网页 1、下载：https://www.bootcss...
Vue中如何进行移动端适配与响应式布局？
it_xushixiong的博客
06-13 4742
在Vue.js中，可以使用媒体查询、flexbox布局和第三方库等技术来实现移动端适配和响应式布局。媒体查询可以根据设备的屏幕尺寸来应用不同的样式，而flexbox布局可以用于实现灵活的、响应式的布局。此外，还可以使用第三方库来快速构建响应式布局，例如Bootstrap或Element UI等UI库。移动端适配和响应式布局已经成为Web开发中不可或缺的一部分，因为越来越多的用户正在使用移动设备访问网站。通过使用Vue.js和相关技术，我们可以轻松地实现移动端适配和响应式布局，以提供更好的用户体验。
Bootstrap：简介和基本使用
程序员无羡的博客
03-20 1215
Bootstrap：简介和基本使用
前端框架---Bootstrap的使用
m0_74249162的博客
04-30 555
Bootstrap是一个来自Twitter的前端开发框架，它基于HTML、CSS和JavaScript，以其简洁灵活的特性使得Web开发更加快捷。基本结构网格系统：Bootstrap使用12列网格布局，可以快速构建响应式布局。通过添加class到HTML元素上，可以指定元素在不同屏幕宽度下的列数和偏移量。CSS样式：Bootstrap包含了大量的预设CSS样式，如排版、颜色、按钮、表单等，可以快速地为网页添加统一的样式。JavaScript插件。
移动4G时代响应式布局网页之bootstrap3.zip
08-15
本Bootstrap教程能够让您了解到，Bootstrap框架是一个非常受欢迎的前端开发框架...在这个Bootstrap教程中，将带领大家了解Bootstrap框架以及如何使用Bootstrap框架，通过本教程学习能够独立定制出适合自己的Bootstrap。
intro-to-bootstrap:学习使用Bootstrap 4创建现代化的响应式网站！
05-08
课程说明Bootstrap是一个开放源代码的前端框架，是同类中最流行的一种，用于在Web上构建响应式，对移动设备友好的项目。 它由灵活HTML，CSS和JavaScript组件组成，它使各种技能水平的设计人员和开发人员都可以快速...
bootstrap模板快速构建响应式和移动设备
最新发布
06-07
Bootstrap是一个流行的开源前端框架，用于快速构建响应式和移动设备优先的网站和Web应用程序。它提供了一套简洁而强大的HTML、CSS和JavaScript工具，可以帮助开发人员轻松地创建各种样式的网页组件和布局。 如果你...
118套-各行业响应式网站模板-适配移动端-HTML源码(毕设&课设&大作业可用).zip
04-10
这些模板基于最新的HTML5和CSS3标准构建，并大量使用响应式设计原则，结合流行的Bootstrap框架，保证了网站的弹性布局和设备的全面兼容性。它们不仅具备优雅的外观设计，还拥有高度的可定制性和扩展性，让学生们能够...
响应式布局bootstrap使用
qq_46372132的博客
08-26 219
响应式布局bootstrap使用
前端学习（十二）Bootstrap响应式布局
whitefish520的博客
08-19 7998
响应式布局原理 使用媒体查询针对不同宽度的设备，进行布局和样式的设置，从而适配不同的设备 响应式布局需要一个父级作为布局容器，通过媒体查询，改变这个布局容器的大小，根据布局容器的宽度，决定里面的子元素排列方式和大小 常见的布局容器划分情况 设备 宽度 布局容器宽度 手机 width ≤ 768 100% 平板 768 ≤ width ＜992 750px 桌面显示器 992≤ width ＜1200 970px 宽屏桌面显示器 width ≥ 1200 1170px Boot
响应式开发原理及Bootstrap栅格布局详解，源码+原理+手写框架
2401_83621661的博客
04-03 384
Bootstarp的使用Bootstarp使用四部曲创建文件夹结构创建html骨架结构引入相关样式文件书写内容我们过去的文件夹结构是这样的：现在我们的文件夹里多了一个bootstarp文件夹然后把我们下载的Bootstarp3的压缩包解压，把里面的css,js,fonts全部复制然后粘贴到这个文件夹里创建html骨架结构：在Bootstarp3 入门下面 有个基本模板，我们把模板里的这句话复制到我们的html结构中：最后就是这样的：引入bootstrarp的样式文件。
Bootstrap CSS 编码规范之媒体查询的位置
歪脖先生的博客
03-18 666
媒体查询的位置遵守就近原则，将媒体查询放在相关规则的附近，不要将他们打包放在一个单一样式文件中，或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例：.element { ... }.element-avatar { ... }.element-selected { ... }@media (min-width: 480px) {  .element { ...}  ....
利用bootstraps实现响应式布局
weixin_44541076的博客
01-18 1万+
首先我们要在页面上引用bootstraps 引用bootstrap或者bootstrap.min都可以的，如果有需要查看源代码，那么可以引用bootstrap，一般都建议用boostrap.min。同样的效果，bootstrap.min占的内存小，意味着能加载的更快一点，哪怕只是快0.1秒，感觉也是很不一样的。怎样引用就不用我说了吧？ &lt;link rel="stylesheet" href...
【Bootstrap】自动适应PC、平板、手机的Bootstrap栅格系统
热门推荐
编程记录，亲测有效
10-31 2万+
栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。 1692年，新登基的法国国王路易十四感到法国的印刷水平差强人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担
快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力
weixin_34150830的博客
03-28 1650
为了寻找一个优质的网页模板，网页设计师和开发者往往可能会花上大半天的时间。不过幸运的是，现在的网页设计师和开发人员已经开始共享HTML5，Bootstrap和CSS3中的免费网页模板资源。鉴于网站模板的灵活性和强大的功能，现在广大设计师和开发者对html5网站的实际需求日益增长。为了造福大众，Mockplus...
BootStrap的使用教程，适合新手小白！！
m0_62309118的博客
09-28 6510
1.bootStrap怎么用？ 第一步、链接: 官网 点击红线边框处即可跳转到下载页面，有三个东西可以给我们选择，由于我们现在处于初级使用阶段，或者说我们直接用在生成环境下，我们下载第一个就好： 下载成功后可以得到一个.zip的文件，解压后我们可以得到一个包含css、fonts和js的文件夹，ok，准备工作我们就做好了。 现在要怎么用呢，一头雾水吧，我们新建一个文件夹，命名为test，将刚刚三个文件夹复制到test文件夹中，现在用sublime打开刚刚的文件夹，点击file-open folder，选择
bootstrap布局
05-18
Bootstrap是一款基于HTML、CSS和JavaScript的开源前端框架，提供了一套响应式、移动设备优先的设计和开发工具集，可以快速构建现代化的Web界面。 Bootstrap中的布局系统是其核心功能之一，可以帮助开发人员快速搭建网页布局。Bootstrap采用了栅格系统来实现页面布局，将页面划分为12个等宽的列，使用者可以将这些列进行组合，搭建出自己需要的页面布局。 以下是一个简单的Bootstrap布局示例： ```html <div class="container"> <div class="row"> <div class="col-sm-4">左侧栏</div> <div class="col-sm-8">主要内容</div> </div> </div> ``` 在上面的代码中，`.container`是Bootstrap提供的一个容器，用于将网页内容进行居中对齐。`.row`则表示一行，里面包含了两个列，分别是左侧栏和主要内容，`.col-sm-4`表示左侧栏占用4个列的宽度，`.col-sm-8`表示主要内容占用8个列的宽度。 在这种方式下，如果用户的屏幕宽度较小，左侧栏和主要内容会自动换行显示，以适应不同的屏幕尺寸。 除了栅格系统，Bootstrap还提供了很多其他的布局工具，如响应式辅助类、栅格偏移、偏移量等，使用这些工具可以更加灵活地搭建网页布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值