Bootstrap的理解和使用

最新推荐文章于 2024-07-24 23:00:08 发布

小软伖

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量46

点赞数

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/m0_52386581/article/details/133830584

版权

概述

首先，我们来说说Bootstrap是什么。Bootstrap 是最受欢迎的HTML、CSS，和JS框架，用于响应式开发布局、移动设备优先的Web项目。

使用

我们引入Bootstrap有以下几种方式：

1、下载：可以下载用于生产环境的Bootstrap、Bootstrap源码、Sass。根据自身的需要去下载相应的包。

 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <!--  href 写的是自己放置的 bootstrap.min.css 的位置-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>

2、CDN的引入：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

3、通过 Bower进行安装（如果有的话）

bower install bootstrap

4、通过npm的安装

npm install bootstrap@3

布局容器

Bootstrap需要为页面内容和栅格系统包裹一个 .container 容器，Bootstrap预先定义好了这个类。叫 .container 它提供里两个作此用处的类

1、.container

（1）响应式布局的容器固定宽度

（2）大屏（>=1200px）宽度定为 1170px

（3）中屏（>=992px）宽度定为970px

（4）小屏（>=768px）宽度定为 750px

（5）超小屏（100%）宽度定为100%

2、.container-fluid

（1）流式布局容器百分百宽度

（2）占据全部视口的容器

（3）适合于单独做移动端开发

栅格系统（网格系统）

栅格系统英文为”grid systems“，也有人翻译为”网格系统“，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

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

Bootstrap中的container的宽度是固定的，但在不同屏幕下，container的宽度是不同的，我们再把container分为12等份。

栅格系统的选项参数

举个例子：

<div class="container">
    // 需要在外面包裹一个row
    <div class="row">
        // 我想要两个div 在中等屏幕及大屏的情况下 .col-md- 第一个div占9份，第二个div占 3份
        <div class="col-md-9">1</div>
        <div class="col-md-3">1</div>
    </div>
</div>

栅格系统的列嵌套

也就是在栅格系统内置的栅格系统再次嵌套。如上图。

<div class="col-md-4">
    <div class="row">
        <div class="col-sm-6"></div>
        <div class="col-sm-6"></div>
    </div>
</div>

栅格系统的列偏移

若想实现上图的结果，可以借助栅格系统的列偏移实现

// 想要右侧跟左侧隔一段距离 有12份，左侧+右侧 占了6份，那么右侧向右侧偏移6份既可
<div class="col-md-3">左侧</div>
<div class="col-md-3 col-md-offset-6">右侧</div>

栅格系统的列排序

可以通过 .col-md-push-* 和 .col-md-pull-*去实现，*的值取决于左侧和右侧所占份数

<div class="container">
     <div class="row">
        <div class="col-md-4 col-md-push-8">左侧</div>
        <div class="col-md-8 col-md-pull-4">右侧</div>
    </div>
</div>

响应式工具

以上的类名可以在处于某个大小的屏幕下该元素是否隐藏，若想反过来，让某个元素在某个屏幕大小显示可以使用这些类： visible-xs visible-sm visible-md visible-lg。

一些注意点

在开发的时候要多去看看Bootstrap的开发文档，里面有很多字体图标、样式，只要我们复制对应的class就可以显示我们想要的样式了。可以多多去看看噢

点击跳转到Bootstrap3的官方文档

小软伖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap的理解和使用

首先，我们来说说Bootstrap是什么。Bootstrap 是最受欢迎的HTML、CSS，和JS框架，用于响应式开发布局、移动设备优先的Web项目。使用我们引入Bootstrap有以下几种方式：1、下载：可以下载用于生产环境的Bootstrap、Bootstrap源码、Sass。根据自身的需要去下载相应的包。3、通过 Bower进行安装（如果有的话）4、通过npm的安装。
复制链接

扫一扫