bootstrap

最新推荐文章于 2025-06-07 08:28:40 发布
最新推荐文章于 2025-06-07 08:28:40 发布
阅读量2.4k 收藏 42
点赞数 11
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44654375/article/details/87388648

bootstrap

  1. 能够完成BootStrap环境搭建
  2. 能够理解bootstrap的栅格系统
  3. 能够查询文档创建BootStrap的按钮、表格、表单等常用组件
  4. 能够查询文档使用BootStrap的轮播图、分页条
  5. 能够利用Bootstrap完成网站首页

第一章 bootstrap简介

1.1 bootstrap概述

1.1.1 什么是bootstrap

Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架。

该框架已经预定义了一套CSS样式和与样式对应的JS代码。（对应的样式有对应的特效）

开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。

作用：

  1. Bootstrap 使得 Web 开发更加快捷，高效。

  2. BootStrap支持响应式开发，解决了移动互联网前端开发问题

课外了解知识：

该框架由Twitter 公司的设计师Mark Otto和Jacob Thornton合作开发。

Bootstrap基础入门使用的都是自带CSS样式，高级开发中需要使用HTML5、CSS3、动态CSS语言Less 进行自定义开发，JavaEE课程中学习是“基础入门”。

中文官网：

http://www.bootcss.com

1.1.2 什么是响应式布局、响应式布局能够解决的问题

  • 响应式布局：一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独做一个展示版本。

  • 此概念专为解决移动互联网浏览而诞生的。

  • 响应式布局，使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开发维护成本，并且能带给用户更好的体验性

未使用响应式开发：

在这里插入图片描述

使用了响应式开发：

在这里插入图片描述

1.2 环境下载

1.2.1 下载

在这里插入图片描述

1.2.2 目录结构

在这里插入图片描述

1.2.3 内容结构

  • 发布版，及开始使用到的Bootstrap内容结构

在这里插入图片描述

bootstrap/
├── css/
│   ├── bootstrap.css							//预定义的CSS文件
│   ├── bootstrap.css.map						//CSS与less源码对应文件
│   ├── bootstrap.min.css						//压缩
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css						//主题文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js							//js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot		//字体 （字体图标）
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

1.2.4 简洁模板

参考文档：起步/基本模板，http://v3.bootcss.com/getting-started/#template

<!DOCTYPE html>		<!-- HTML5 约束（固定值）-->
<html lang="zh-CN">	<!-- 声明语言，建议编辑-->

    <head>
        <!-- 响应式开发必须使用，且必须在<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 模板</title>

        <!-- Bootstrap预定义的CSS样式、jQuery核心类库、Bootstrap类库-->
        <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script src="../lib/jquery/jquery-1.11.0.js"></script>
        <script src="../lib/bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <h1>你好，世界！</h1>
    </body>

</html>

1.3 布局容器

BootStrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。相当于一个画板。

帮助手册位置：全局CSS样式-------》概览-------》布局容器

任意元素使用了布局容器的样式，都会成为一个布局容器，建议使用div作为布局容器

样式作用
.container类用于固定宽度并支持响应式布局的容器。 【特点：居中，两端留白】
<div class="container"> ... </div>
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid"> ... </div>

为了展示效果明显，我们为div加入了边框样式：style="border:1px solid red;"

示例1：

<!-- 布局容器1：container 特点：居中，两端留白 -->
<div class="container" style="border:1px solid red;">
    1111111111
</div>

效果：

在这里插入图片描述

示例2：

<!-- 布局容器2：container-fluid 特点：占据了视口100%宽度 -->
<div class="container-fluid" style="border:1px solid red;">
    1111111111
</div>

效果：

在这里插入图片描述

第二章 bootstrap栅格系统

2.1 简述栅格系统

为了方便在布局容器中进行网页的布局操作。BootStrap提供了一套专门用于响应式开发布局的栅格系统。

栅格系统将一行分为12列，通过设定元素占用的列数来 布局元素在页面上的展示位置。

帮助手册位置：全局CSS样式-----栅格系统

在这里插入图片描述

**作用：**可以让开发人员更加轻松进行网页布局，并且轻松进行响应式开发。

2.2 栅格系统的特点

  • 栅格特点

    • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
    • 行使用的样式.row，列使用样式col-*-* 元素内容应当放置于“列（column）”内

  • 基本的书写方式必须是：容器–行—列---内容

    • HTML表格：定义一个表格----行-----单元格

  • 栅格参数：col-屏幕尺寸-占用列数

    • 列元素的书写顺序，决定布局顺序，先写的列元素会被先布局到行上。
    • 列元素的占用列数，定义列元素的大小

2.3 入门案例

为了方便显示元素大小，我们为展示元素都赋予了相同样式：border:1px solid red;height:100px;

示例1：一个元素占一行

<div class="container">
    <div class="col-lg-12" style="border:1px solid red;height:100px;"> 11111 </div>
</div>

效果：

在这里插入图片描述

示例2：两个元素占一行

<div class="container">
    <div class="row">
        <div class="col-lg-6" style="border:1px solid red;height:100px;"> 11111 </div>
        <div class="col-lg-6" style="border:1px solid red;height:100px;"> 22222 </div>
    </div>
</div>

效果：

在这里插入图片描述

示例3：四个元素占一行

<div class="container">
    <div class="row">
        <div class="col-lg-4" style="border:1px solid red;height:100px;"> 11111 </div>
        <div class="col-lg-4" style="border:1px solid red;height:100px;"> 22222 </div>
        <div class="col-lg-4" style="border:1px solid red;height:100px;"> 33333 </div>
        <div class="col-lg-4" style="border:1px solid red;height:100px;"> 44444 </div>
    </div>
</div>

效果：

在这里插入图片描述

注意： 一个row下，如果设置的col列数总和小于等于12，那么该row下元素在一行排列；

注意： 一个row下，如果设置的col列数总和大于12，那么超出的元素会另起一行排列；

注意： 行和列可以进行无限嵌套，嵌套方式必须为 列—行---列----行。。。。

注意： 一个row元素下，有12列的

2.4 栅格屏幕尺寸设置

在这里插入图片描述

屏幕尺寸简述：

  • large : lg -------大屏幕，一般PC尺寸

  • medium : md --------中等屏幕，小PC尺寸

  • small: sm : sm -----小屏幕 ，iPad尺寸

  • x small : xs -----超小屏幕，智能手机尺寸

为了方便显示元素大小，我们为展示元素都赋予了相同样式：border:1px solid red;height:100px;

示例：

<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-4 col-sm-12" style="border:1px solid red;height:100px;">
            11111 
        </div>
        <div class="col-lg-2 col-md-4 col-sm-12" style="border:1px solid red;height:100px;"> 
            22222 
        </div>
        <div class="col-lg-2 col-md-4 col-sm-12" style="border:1px solid red;height:100px;"> 
            33333 
        </div>
    </div>
</div>

效果：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意：

若设置了某个屏幕尺寸的样式，那么比该尺寸大的屏幕，会沿用该设置；比该尺寸小的屏幕，会默认一个元素占12列的设置。

例如：设置了col-md-4，那么相当于也设置了col-lg-4。其他屏幕尺寸均默认为col-sm-12,col-xs-12

2.5 列偏移

通常情况下我们需要将元素居中显示，需要左边空出一定的空白区域，这里我们就可以使用列偏移来达到效果。

样式作用
.col-屏幕尺寸-offset-*在指定屏幕尺寸下，向右偏移*个列

2.6 响应式工具

为针对性地在移动页面上展示和隐藏不同的内容，bootStrap提供响应式工具。可以让开发人员通过该工具决定，在何种屏幕尺寸下，隐藏或者显示某些元素

帮助手册位置：全局CSS样式—响应式工具

在这里插入图片描述

第三章 bootstrap常用组件

3.1 列表

BootStrap同样提供了实用的列表样式供开发人员使用。

帮助手册位置：全局CSS样式----排版----列表

样式作用
.list-inline将列表所有元素放置于一行

示例：

<ul class="list-inline">
    <li>传智播客</li>
    <li>黑马程序员</li>
    <li>博学谷</li>
</ul>

效果：

在这里插入图片描述

3.2 按钮

BootStrap提供了丰富的按钮样式供开发人员使用。任何HTML元素加上以下样式都会变成对应按钮

帮助手册位置：全局CSS样式----按钮

样式作用
.btn btn-default示例： <a class="btn btn-default">Link</a>
效果： 在这里插入图片描述
.btn btn-primary示例： <a class="btn btn-primary">（首选项）Primary</a>
效果： 在这里插入图片描述
.btn btn-success示例： <a class="btn btn-success">（成功）Success</a>
效果： 在这里插入图片描述
.btn btn-info示例： <a class="btn btn-info">（一般信息）Info</a>
效果： 在这里插入图片描述
.btn btn-warning示例： <a class="btn btn-warning">（警告）Warning</a>
效果： 在这里插入图片描述
.btn btn-danger示例： <a class="btn btn-danger">（危险）Danger</a>
效果： 在这里插入图片描述
.active表示按钮被点击的样式
示例： <a class=”btn btn-danger active”>（危险）Danger</a>
效果： 在这里插入图片描述
.disabled表示按钮被禁用的样式
示例： <a class=”btn btn-danger disabled”>（危险）Danger</a>
效果： 在这里插入图片描述

3.3 导航条

BootStrap已经提供了完整的导航条实例，通常情况下，我们仅需进行简单修改即可使用。

帮助手册位置：组件-------导航条

反色的导航条

通过添加 .navbar-inverse 类可以改变导航条的外观。

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
            <li ><a href="#">家电数码</a></li>
            <li ><a href="#">电脑办公</a></li>
        </ul>
    </div>
</nav>

效果：

在这里插入图片描述

表单的导航条

将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default hidden-xs">Submit</button>
        </form>
    <div/>
</nav>

效果：

在这里插入图片描述

解释：

视口（viewport）：即浏览器上网页的可视区域

视口作用：用于移动设备将 大型页面进行比例缩放显示。

在这里插入图片描述

3.4 轮播图

BootStrap已经提供了完整的轮播图实例，通常情况下，我们仅需进行简单修改即可使用。

轮播图DIV的定时换图属性：data-interval="毫秒值"

**注意：**多个轮播图必须修改轮播图的ID。

帮助手册位置：JavaScript插件— Carousel

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
   <!-- Indicators -->
   <ol class="carousel-indicators">
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
       <li data-target="#carousel-example-generic" data-slide-to="1"></li>
       <li data-target="#carousel-example-generic" data-slide-to="2"></li>
   </ol>

   <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox">
       <div class="item active">
           <img src="..." alt="...">
           <div class="carousel-caption">
               ...
           </div>
       </div>
       <div class="item">
           <img src="..." alt="...">
           <div class="carousel-caption">
               ...
           </div>
       </div>
       ...
   </div>

   <!-- Controls -->
   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
   </a>
   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
   </a>
</div>

效果：

在这里插入图片描述

3.5 排版 对齐方式

BootStrap提供统一的排版方式设置，方便开发人员对内容板式进行调整

帮助手册位置：全局CSS样式----排版----对齐

会将元素内所有的内容都进行排版设置

样式作用
.text-left使元素内容靠左显示
.text-center使元素内容居中显示
.text-right使元素内容靠右显示
<div class="text-center">
    <img src="img/xxx.png" />
</div>

效果：

在这里插入图片描述

3.6 表单元素

BootStrap同样提供了丰富的表单控件供开发人员来选择。

帮助手册位置：全局CSS样式-----表单

示例1：基本实例

在这里插入图片描述

效果：


在这里插入图片描述

示例2：表单名和表单输入项共用一行

在这里插入图片描述

效果：

在这里插入图片描述

示例3：校验状态-出错样式

在这里插入图片描述

效果：

在这里插入图片描述

3.7 分页条

在这里插入图片描述

BootStrap为我们还准备了分页条的样式组件。

帮助手册位置：组件-----------分页

示例1：分页条整体列表

<nav>
    <!-- 分页条整体列表 -->
    <ul class="pagination">
        <!-- 上一页 -->
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <!-- 索引页 -->
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <!-- 下一页 -->
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

效果：

在这里插入图片描述

示例2：上一页 被禁用；索引页 第一页被选中

<nav>
    <!-- 分页条整体列表 -->
    <ul class="pagination">
        <!-- 上一页 被禁用 -->
        <li class="disabled">
            <a aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <!-- 索引页 第一页被选中 -->
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <!-- 下一页 -->
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

效果：


在这里插入图片描述

第四章 综合案例

将使用Bootstrap重写首页，整个案例中将使用到Bootstrap各种模块，为了方便编程，将采用拆分的原则，各个模块单独编写，最后组合

4.1 首页之top

案例分析：

在这里插入图片描述

  1. 整个topbar划分比例：1:2:1
  2. 中间区域只在“大屏幕”和“中等屏幕”显示
  3. 整个区域在“超小屏幕”英寸
案例实现：
<!--
1.整个topbar划分比例：1:2:1
2.中间区域只在“大屏幕”和“中等屏幕”显示
3.整个区域在“超小屏幕”英寸
-->
<div class="container topbar hidden-xs">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <img src="../img/logo2.png"/>
        </div>
        <div class="col-md-6 visible-lg visible-md">
            <img src="../img/header.jpg"/>
        </div>
        <div class="col-md-3 col-sm-6">
            <a href="" class="btn btn-danger btn-sm">免费注册</a>
            <a href="" class="btn btn-link btn-sm">登录</a>
            <a href="" class="btn btn-link btn-sm">购物车</a>
        </div>
    </div>
</div>

4.2 首页之导航

案例分析：

在这里插入图片描述

案例实现：
<!--
1.大屏幕显示所有分类
2.中等屏幕隐藏部分分类，提供“更多”
3.超小屏幕隐藏所有分类，以“汉堡按钮”显示
-->
<div class="container">
    <nav class="navbar navbar-default navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header>
               
                <a class="navbar-brand" href="#">首页</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">电脑办公 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">电脑办公</a></li>
                    <li><a href="#">电脑办公</a></li>
                    <li class="hidden-sm"><a href="#">电脑办公</a></li>
                    <li class="dropdown visible-sm">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">电脑办公</a></li>
                            <li><a href="#">电脑办公</a></li>
                            <li><a href="#">电脑办公</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">电脑办公</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">电脑办公</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default hidden-xs">Submit</button>
                </form>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>

4.3 首页之轮播图

案例分析：

在这里插入图片描述

案例实现：
<div class="container">
    <div id="index_carousel" class="carousel slide" data-ride="carousel">
        <!-- 指示器 Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#index_carousel" data-slide-to="0" class="active"></li>
            <li data-target="#index_carousel" data-slide-to="1"></li>
            <li data-target="#index_carousel" data-slide-to="2"></li>
        </ol>

        <!-- 轮播展示 
* item 表示一个图片，与“指示器”li的个数保持一致 
-->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="../img/1.jpg" alt="第一张图">
            </div>
            <div class="item">
                <img src="../img/2.jpg" alt="第2张图">
            </div>
            <div class="item">
                <img src="../img/3.jpg" alt="第3张图">
            </div>
        </div>

        <!-- 左右控制区 Controls 
* href 用于确定点击触发的那个轮播图 
-->
        <a class="left carousel-control" href="#index_carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">前一张</span>
        </a>
        <a class="right carousel-control" href="#index_carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">下一张</span>
        </a>
    </div>

</div>

4.4 首页之热卖商品

案例分析：

在这里插入图片描述

“热卖商品”模块是对栅格系统的再应用。我们将用已有的知识编写出响应式页面。

案例实现：
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>热卖商品 <img src="../img/title2.jpg"/></h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 col-sm-4 hidden-xs">
            <img src="../img/products/big01.jpg" style="width: 100%;"/>
        </div>
        <div class="col-md-10 col-sm-8">
            <div class="col-md-6 col-sm-12" style="height:200px;">
                <img src="../img/products/middle01.jpg" style="height: 100%;width:100%;"/>
            </div>
            <div class="col-md-2 product col-sm-4 col-xs-6">
                <img src="../img/products/small01.jpg"/>
                <p>电器</p>
                <p style="font-size: #f00;">￥998</p>
            </div>
            <div class="col-md-2 product col-sm-4 col-xs-6">
                <img src="../img/products/small02.jpg"/>
                <p>电器</p>
                <p style="font-size: #f00;">￥998</p>
            </div>
            <div class="col-md-2 product col-sm-4 col-xs-6">
                <img src="../img/products/small03.jpg"/>
                <p>电器</p>
                <p style="font-size: #f00;">￥998</p>
            </div>

            <div class="col-md-2 product col-sm-4 col-xs-6">
                <img src="../img/products/small04.jpg"/>
                <p>电器</p>
                <p style="font-size: #f00;">￥998</p>
            </div>
            <div class="col-md-2 product col-sm-4 col-xs-6">
                <img src="../img/products/small05.jpg"/>
                <p>电器</p>
                <p style="font-size: #f00;">￥998</p>
            </div>
            <div class="col-md-2 product col-sm-4 col-xs-6">
                <img src="../img/products/small06.jpg"/>
                <p>电器</p>
                <p style="font-size: #f00;">￥998</p>
            </div>
            <div class="col-md-2 product col-sm-4 col-xs-6">
                <img src="../img/products/small07.jpg"/>
                <p>电器</p>
                <p style="font-size: #f00;">￥998</p>
            </div>
            <div class="col-md-2 product col-sm-4 col-xs-6">
                <img src="../img/products/small08.jpg"/>
                <p>电器</p>
                <p style="font-size: #f00;">￥998</p>
            </div>
            <div class="col-md-2 product col-sm-4 col-xs-6">
                <img src="../img/products/small09.jpg"/>
                <p>电器</p>
                <p style="font-size: #f00;">￥998</p>
            </div>

        </div>
    </div>

</div>

4.5 首页之footer

在这里插入图片描述

案例分析：

通过分析，该模块需要使用栅格划分上下两行，第二行的文字信息准备使用“列表”，内容的居中将提供两种方案：文字居中，栅格列偏移

案例实现：
<div class="container">
    <div class="row">
        <img src="../img/footer.jpg" style="width:100%;"/>
    </div>
    <div class="row">
        <!--可以使用  text-center 文本居中-->
        <div class="col-md-8 col-md-offset-3">
            <ul class="list-inline">
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">招贤纳士</a></li>
                <li><a href="#">法律声明</a></li>
                <li><a href="#">友情链接</a></li>
                <li><a href="#">支付方式</a></li>
                <li><a href="#">配送方式</a></li>
                <li><a href="#">务声明服</a></li>
                <li><a href="#">广告声明</a></li>
            </ul>
        </div>
    </div>
</div>
Bootstrap
weixin_53037175的博客
12-13 619
Bootstrap 来自Twitter，是目前很受欢迎的前端框架。 它是基于HTML、CSS、JAVASRIPT的，简洁灵活，使得Web开发更便捷。 它有大量的组件样式，这也是它的优点也是缺点，如果我们有特殊的需求，得专门去定制这样式，这样的话，一个网站有大量的非Bootsatrap样式存在，那我们得做大量的CSS重写，这样就失去了其框架的意义。 Bootstrap有个很重要的特性—响应式设计。它支持不同终端来显示同一套代码。 1、Bootstrap全局css样式之布局容器和栅格系统 栅格系统用于通过一系列
bootstrap 主题
11-14
一个非常好用的bootstrap 模板，自适应后台管理模板。有各种组件，轻松搭建bootstrap网站！
Bootstrap：前端开发的强大工具
hello！
06-07 1268
Bootstrap是Twitter开发的开源前端框架，提供HTML、CSS和JavaScript组件，帮助快速构建响应式网站。主要特点包括响应式布局、丰富UI组件和浏览器兼容性。可通过CDN或本地安装引入，核心功能包括12栏栅格系统、按钮、表单等组件以及响应式断点控制。Bootstrap还提供间距、文本等实用类，并支持通过SASS定制样式。其模块化设计和跨设备一致性使其成为现代前端开发的高效工具。
bootstrap旅游网站
02-09
Bootstrap是世界上最流行的前端开发框架之一，尤其在构建响应式、移动优先的网页设计时，它提供了丰富的组件和样式。"Bootstrap旅游网站"项目显然利用了Bootstrap的强大功能来创建一个专门针对旅游业的网站模板。...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
bootstrap.bundle.min.js
最新发布
06-16
在前端开发领域，Bootstrap 是一个非常流行的前端框架，它由 Twitter 创建，主要用于快速开发响应式布局和跨浏览器兼容的网页。Bootstrap 框架的核心文件之一是 bootstrap.bundle.min.js，这是一个压缩后的 ...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
JAVA从零开始学习知识整理——HTML——day05—【Bootstrap】
weixin_44167508的博客
01-26 346
一、Bootstrap 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插...
BootStrap的简单介绍
热门推荐
星空之尘的博客
05-23 2万+
BootStrap 概念：一个前端开发的框架，Bootstrap是基于html、css、Javascript的。 框架：框架是一个半成品软件，开发人员可以在框架基础上进行开发，简化编码。 好处： ① 定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。 ② 响应式布局：同一套页面可以兼容不同分辨率的设备。 快速入门 下载Bootstrap 下载后有三个文件夹，将这三个文件夹复制到项目中 创建html页面，引入必要的资源 <!DOCTYPE html> <h
Bootstrap 学习（一）入门
子冰吖的博客
04-10 5463
一：什么是Bootstrap？ Bootstrap是目前留下的前端框架之一，具备已下特点： 基于HTML、CSS、JavaScript开发的； 样式展现方面定义了大量全局样式、列表、按钮等样式组件； 特效方面实现了轮播、菜单等常用的js控件； 样式采用less编写，js调用了jquery库； 来自Twitter，现在委托保管再github上。 Bootstrap适用于网站的开发，不适用于管理系...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值