BootStrap快速入门

最新推荐文章于 2024-06-18 21:32:55 发布
最新推荐文章于 2024-06-18 21:32:55 发布
阅读量1.1k 收藏 10
点赞数 3
CC 4.0 BY-SA版权
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chenguoao1999/article/details/120300893
本文介绍了BootStrap的基础理论，包括其概念、作用和特色，以及如何通过官网获取资源并实现基础布局和栅格系统。内容涵盖了响应式布局、列偏移、显示隐藏、列表、按钮、图片、文本、导航条、轮播图、排版、表格、表单和分页等关键组件的实战应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

课程笔记Day47

  • BootStrap快速入门
  • BootStrap栅格系统
  • BootStrap常用样式

第一章 BootStrap快速入门

第01节 基础理论
1、概念介绍
1. 什么是 BootStrap ?
	BootStrap 是一款前端的框架, 基于 HTML CSS 和 JavaScript 开发出来的, 目前持续的更新着

2. BootStrap 有什么作用啊?
	可以快速的搭建网页, 内部制定了很多的样式效果,可以直接拿过来快速使用。

3. BootStrap 有什么特色呢?
	支持响应式布局。
	响应式布局: 我们可以根据屏幕大小的不同，展示不同的效果。
	例如: 在电脑屏幕，按照电脑屏幕的尺寸大小展示效果, 
	如果在平板上面，那就按照平板的尺寸大小展示，如果在手机屏幕，按照手机的屏幕大小去展示效果。
	简单一点说: 就是支持不同屏幕尺寸的适配问题。
2、两个网站
1. BootStrap 的官方网站:    https://v3.bootcss.com/
2. BootStrap 的菜鸟教程:    https://www.runoob.com/bootstrap/bootstrap-tutorial.html
第02节 快速入门
1、操作步骤

下载BootStrap的资源包

资源包结构:
	css
		bootstrap.css
		bootstrap.min.css
		bootstrap-theme.css
		bootstrap-theme.min.css
		bootstrap.css.map
		bootstrap.min.css.map
		bootstrap-theme.css.map
		bootstrap-theme.min.css.map
	fonts
		glyphicons-halflings-regular.eot
		glyphicons-halflings-regular.svg
		glyphicons-halflings-regular.ttf
		glyphicons-halflings-regular.woff
		glyphicons-halflings-regular.woff2
	js
		bootstrap.js
		bootstrap.min.js
		npm.js

步骤

1. 导入上面的资源包
2. 还需要添加 jquery.js 的文件
3. 引入模板框架

模板

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <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>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>
2、案例代码

目录结构

在这里插入图片描述

HTML的代码

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery-3.3.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
第03节 布局容器
1、位置
官方网站：  https://v3.bootcss.com/css/#overview-container
找到布局容器。
2、代码

两端留白的效果

案例

<div class="container">
    曾经有一段真挚的感情，在我面前，我不懂得珍惜，直到失去之后，才追悔莫及，如果上天能够给我一次再来一次的机会，我希望对她说：给我一万年。
    曾经有一段真挚的感情，在我面前，我不懂得珍惜，直到失去之后，才追悔莫及，如果上天能够给我一次再来一次的机会，我希望对她说：给我一万年。
</div>

效果

在这里插入图片描述

全部占满的效果

代码

<div class="container-fluid">
    ABCDEFG曾经有一段真挚的感情，在我面前，我不懂得珍惜，直到失去之后，才追悔莫及，如果上天能够给我一次再来一次的机会，我希望对她说：给我一万年。
    ABCDEFG曾经有一段真挚的感情，在我面前，我不懂得珍惜，直到失去之后，才追悔莫及，如果上天能够给我一次再来一次的机会，我希望对她说：给我一万年。
</div>

效果

在这里插入图片描述

第二章 BootStrap栅格系统

第01节 基础理论
1、位置
网站:  https://v3.bootcss.com/css/#overview-container 
找到 栅格系统
2、概念
栅格系统就是将屏幕划分成为 12个区域，看看元素占据几个区域。
第02节 案例演示
1、基础案例

代码

<div class="container">
    
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>

效果图
在这里插入图片描述

2、注意事项
1. 在一个 class="row" 里面的 列数和,超过12 会怎么办呢?
	超过的部分会换行

2. 在一个 class="col-md-13" 这里直接定义为 13 会出现什么情况呢?
	他会独占一行，按照12的标准来。
3、屏幕尺寸
超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的，
当大于这些阈值时将变为水平排列C
.container 最大宽度None （自动）750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列（column）数12
最大列（column）宽自动~62px~81px~97px
槽（gutter）宽30px （每列左右均有 15px）
可嵌套是
偏移（Offsets）是
列排序是

需要注意：列的大小顺序

大小顺序:
	lg > md > sm > xs

如果我们指定了 md的大小。那么只要在 为 970px 以上的大小，都会按照 md的标准来执行。
但是如果没有达到 970 px 则会改变之前原始的样式。 （970px指的是 md的临界值）

如果我们指定了 sm的大小。那么只要在 为 750px 以上的大小,都会按照 sm 的标准来执行。
但是如果没有达到 750 px 则会改变之前原始的样式。 （750px指的是 sm的临界值）

如果我们指定了 xs的大小。那么只要在 为 任意类型的大小, 都会按照 xs 的标准来执行。

案例代码

<div class="container">

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

案例代码

<div class="container">

    <div class="row">
        <div class="col-md-4">.col-md-4 1</div>
        <div class="col-md-4">.col-md-4 2
            <div class="row">
                <div class="col-sm-6"> 嵌套列 .col-sm-6 1 </div>
                <div class="col-sm-6"> 嵌套列 .col-sm-6 2 </div>
            </div>
        </div>
        <div class="col-md-4">.col-md-4 3</div>
    </div>
</div>

效果图
在这里插入图片描述

第03节 列偏移
1、基础说明
1. 什么是列偏移呢?
	列偏移指的是，在左边区域当中,预留多少空间出来。左边会自动占据多大空间的大小。

2. 语法格式:
	.col-屏幕尺寸的级别-offset-占据空间的大小
	
3. 语法举例:
	.col-lg-offset-3   
	.col-md-offset-5
	.col-sm-offset-4
	.col-xs-offset-2
2、案例代码

代码

<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4 1</div>
        <div class="col-md-2 col-sm-offset-2">.col-md-4 2</div>
        <div class="col-md-2 col-xs-offset-2">.col-md-4 3</div>
    </div>
</div>

效果图

在这里插入图片描述

第04节 显示隐藏
1、基础说明
我们可以在不同的屏幕尺寸下面，设置有些列显示，有些列隐藏的效果。

基础语法:
	.visiable-屏幕尺寸     	 效果:显示列
	.hidden-屏幕尺寸		效果:隐藏列
2、案例代码

代码

<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4 1</div>
        <div class="col-md-4 visible-sm">.col-md-4 2 当达到sm级别显示</div>
        <div class="col-md-4">.col-md-4 3</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4 1</div>
        <div class="col-md-4 hidden-md">.col-md-4 2 当达到md级别隐藏</div>
        <div class="col-md-4">.col-md-4 3</div>
    </div>
</div>

效果
在这里插入图片描述

第三章 BootStrap常用样式

第01节 列表
1、位置
https://v3.bootcss.com/css/#type-lists

主要是查看 内联列表
2、代码

案例代码

<ul class="list-inline">
    <li><a href="http://www.baidu.com">新闻</a></li>
    <li><a href="http://www.baidu.com">hao123</a></li>
    <li><a href="http://www.baidu.com">地图</a></li>
    <li>直播</li>
    <li>视频</li>
    <li>贴吧</li>
    <li>学术</li>
    <li>更多</li>
</ul>

效果图

在这里插入图片描述

第02节 按钮
1、位置
https://v3.bootcss.com/css/#buttons

主要是查看 按钮
2、代码

按钮样式

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>


<p>
    <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
    <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
    <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
    <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
    <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
    <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

效果图
在这里插入图片描述

第03节 图片
1、位置
https://v3.bootcss.com/css/?#images

主要是查看 图片形状
2、代码

案例代码

<img src="../images/meinv.png" alt="..." class="img-rounded" style="width: 200px;height: 200px">
<img src="../images/meinv.png" alt="..." class="img-circle" style="width: 120px;height: 120px">
<img src="../images/meinv.png" alt="..." class="img-thumbnail" style="width: 200px;height: 200px">

效果图
在这里插入图片描述

第04节 文本
1、位置
https://v3.bootcss.com/css/?#helper-classes

主要是查看 辅助类 情境文本
2、代码

案例代码

<p class="text-muted">曾经有一段真挚的感情，在我面前，我不懂得珍惜，直到失去之后...</p>
<p class="text-primary">段坤,干他,耶稣也救不了你</p>
<p class="text-success">还有谁？</p>
<p class="text-info">我要打十个</p>
<p class="text-warning">二连长，你的意大利炮呢？</p>
<p class="text-danger">这瓜保熟吗？</p>

<p class="bg-primary" style="padding: 5px">我爱你,你爱我,蜜雪冰城甜蜜蜜</p>
<p class="bg-success">坐地日行八万里</p>
<p class="bg-info">剑气纵横三万里</p>
<p class="bg-warning">一剑光寒动九州</p>
<p class="bg-danger">我命由我不由天</p>

效果图
在这里插入图片描述

第05节 导航条
1、位置
https://v3.bootcss.com/components/#navbar

找到 导航条
2、代码

案例代码（正色导航条）

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <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 class="dropdown">
                    <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="#">学习Java</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-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">退出登录</a></li>
                <li class="dropdown">
                    <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="#">我的XXXX</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

效果图（正色导航条）

在这里插入图片描述

如果是反色导航条的设置，只需要修改属性。 navbar-inverse 就可以完成反色导航条的效果

部分代码:

<!-- 重点是 navbar-inverse 设置之后，导航条则变成黑色 -->
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">

效果图：
在这里插入图片描述

第06节 轮播图
1、位置
JavaScript 插件当中,找到 Carousel

https://v3.bootcss.com/javascript/#carousel
2、代码

案例代码

<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>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="../images/lunbotu01.jpg" alt="...">
            <div class="carousel-caption">
                天下风云出我辈
            </div>
        </div>
        <div class="item">
            <img src="../images/lunbotu02.jpg" alt="...">
            <div class="carousel-caption">
                一入江湖岁月催
            </div>
        </div>
        <div class="item">
            <img src="../images/lunbotu03.jpg" alt="...">
            <div class="carousel-caption">
                皇图霸业谈笑中
            </div>
        </div>
        <div class="item">
            <img src="../images/lunbotu04.jpg" 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>

效果图

在这里插入图片描述

第07节 排版效果
1、位置
全局CSS样式  ---->  排版  ----> 对齐

https://v3.bootcss.com/css/#type-alignment
2、代码

案例代码

<p class="text-left">Left aligned text. 左对齐的效果</p>
<p class="text-center">Center aligned text. 居中对齐的效果</p>
<p class="text-right">Right aligned text. 右对齐的效果</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

效果图

在这里插入图片描述

第08节 表格
1、位置
位置： 全局CSS 样式   表格

https://v3.bootcss.com/css/#tables
2、代码

案例代码

<table class="table table-hover table-bordered">
    <tr class="active">
        <td>ID</td>
        <td>NAME</td>
        <td>AGE</td>
    </tr>
    <tr class="success">
        <td>1</td>
        <td>张三</td>
        <td>23</td>
    </tr>
    <tr class="warning">
        <td>2</td>
        <td>李四</td>
        <td>24</td>
    </tr>
    <tr class="danger">
        <td>3</td>
        <td>王五</td>
        <td>25</td>
    </tr>
    <tr class="info">
        <td>4</td>
        <td>赵六</td>
        <td>26</td>
    </tr>
</table>

效果图
在这里插入图片描述

第09节 表单
1、位置
全局CSS样式   表单

https://v3.bootcss.com/css/#forms
2、代码

案例代码（普通表单）

<form style="width: 300px; margin: auto">
    <div class="form-group">
        <label for="emial">邮箱:</label>
        <input type="email" class="form-control" id="emial" name="emial" placeholder="请输入邮箱">
    </div>
    <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
    </div>
    <div class="form-group">
        <label for="file">文件上传</label>
        <input type="file" id="file" name="file">
        <p class="help-block">点击上面的按钮，选择文件信息.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="remember" value="remember"> 记住密码
        </label>
    </div>
    <button type="submit" class="btn btn-default">确认并且提交</button>
</form>

效果图（普通表单）
在这里插入图片描述

案例代码（样式的表单）

<div style="width: 400px; margin: auto">
    <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">成功的输入框</label>
        <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
        <span id="helpBlock2" class="help-block"> 这里的样式受到 has-success 控制的  </span>
    </div>
    <div class="form-group has-warning">
        <label class="control-label" for="inputWarning1"> 警告的输入框 </label>
        <input type="text" class="form-control" id="inputWarning1">
        <span id="helpBlock3" class="help-block"> 这里的样式受到 has-warning 控制的  </span>
    </div>
    <div class="form-group has-error">
        <label class="control-label" for="inputError1"> 错误的输入框 </label>
        <input type="text" class="form-control" id="inputError1">
        <span id="helpBlock4" class="help-block"> 这里的样式受到 has-error 控制的  </span>
    </div>
    <div class="has-success">
        <div class="checkbox">
            <label>
                <input type="checkbox" id="checkboxSuccess" value="option1">
                成功的多选框， 这里的样式受到 has-success 控制的
            </label>
        </div>
    </div>
    <div class="has-warning">
        <div class="checkbox">
            <label>
                <input type="checkbox" id="checkboxWarning" value="option1">
                警告的多选框， 这里的样式受到 has-warning 控制的
            </label>
        </div>
    </div>
    <div class="has-error">
        <div class="checkbox">
            <label>
                <input type="checkbox" id="checkboxError" value="option1">
                错误的多选框， 这里的样式受到 has-error 控制的
            </label>
        </div>
    </div>
</div>

效果图（样式的表单）
在这里插入图片描述

第10节 分页
1、位置
组件  ---> 分页

https://v3.bootcss.com/components/#pagination
2、代码

案例代码

<nav aria-label="Page navigation">
    <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>

效果图
在这里插入图片描述

Bootstrap入门（一）
qq_62331938的博客
04-27 2417
前言 大家好！我是九歌，今天我要分享的内容是Bootstrap的入门，首先老规矩先上思维导图。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Bootstrap 学习一门新的技术我们终究都逃不过三个W。What,Why,Where。 1.What——Bootstrap是什么？ Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍...
Bootstrap：前端开发的强大工具
最新发布
hello！
06-07 1192
Bootstrap是Twitter开发的开源前端框架，提供HTML、CSS和JavaScript组件，帮助快速构建响应式网站。主要特点包括响应式布局、丰富UI组件和浏览器兼容性。可通过CDN或本地安装引入，核心功能包括12栏栅格系统、按钮、表单等组件以及响应式断点控制。Bootstrap还提供间距、文本等实用类，并支持通过SASS定制样式。其模块化设计和跨设备一致性使其成为现代前端开发的高效工具。
Bootstrap的快速入门
2301_80638487的博客
06-18 1446
①Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集，它简洁灵活，使得web开发更加的便捷.②Bootstrap是一个建立一个页面,就可以在3三个终端(PC端、平板、手机)上完美展示的响应式前端框架。
Bootstrap快速入门
weixin_34279246的博客
05-25 174
Bootstrap学习有两个重点，一个是概念的理解，理解bootstrap是如何通过div来代替过去的table布局的；一个是常用结构的熟悉，做到需要的组件及时能找到，组合一下就可以满足需求。学习后的最大感受就是：bootstrap让前端布局和渲染的工作，由填空题变成了选择题。即便没有很强的审美能力，也可以让网页简洁大方，颜值爆表。 概念 BootStrap是由Twitter的两位员工Mark ...
Bootstrap快速入门GitChat1
08-03
在Bootstrap快速入门中，首先需要了解其基本结构。Bootstrap的核心元素包括网格系统、导航、表单、按钮、图像、JavaScript插件等。网格系统是Bootstrap布局的基础，它基于12列的响应式栅格，允许开发者创建灵活的...
Bootstrap快速入门.pdf
08-19
这个框架由Twitter的开发者创建，提供了一系列预先设计的CSS、JS组件和HTML模板，可以帮助开发者快速而美观地创建网页布局。 在提供的代码片段中，我们可以看到几个关键的Bootstrap元素： 1. **引入Bootstrap CSS*...
Bootstrap快速入门与功能概述
### 描述知识点：引导程序Bootstrap快速入门选项 Bootstrap是一个流行的前端框架，用于开发响应式布局和移动优先的Web项目。描述中提到了几种安装Bootstrap的方法： - **克隆仓库**：使用Git克隆Bootstrap的GitHub...
掌握Bootstrap快速入门与开发流程
资源摘要信息:"Bootstrap快速入门指导" Bootstrap是当前最受欢迎的前端框架之一，它使得开发者能够快速搭建美观且响应式的网页。Bootstrap是基于HTML、CSS、JavaScript的，主要用于快速开发移动设备优先的Web项目。...
Bootstrap 快速入门教程演示
资源摘要信息:"kick-off-bootstrap:bootstrap 教程" Bootstrap是一个非常流行的前端框架，它由...以上就是本Bootstrap教程的核心知识点和内容概览，希望学习者能够通过本教程快速入门并熟练掌握Bootstrap框架的使用。
bootstrap
weixin_30680385的博客
10-26 150
屏幕尺寸(宽度) 超小屏幕，宽度 < 768， 如：手机 小型屏幕，768 <= 宽度 < 992，如：平板 中等屏幕，992 <= 宽度 < 1200，如：电脑 超大屏幕，宽度 >= 1200，如：电视 响应式布局 根据不同的客户端显示不同的效果，就称为响应式布局。 由于移动设备访问网站的比...
Bootstrap_组件_分页条
zhangnan456的博客
08-29 219
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
bootstrap快速入门
晴夏的博客
04-09 321
1、Bootstrap 介绍 Bootstrap 是目前最受欢迎的前端框架，涵盖了页面开发的大部分css布局功能，js的特效功能，使得 Web 开发更加快捷。Bootstrap中先定义好了样式和特效，如果需要直接通过class和其他的属性进行调用。 2、导入 Bootstrap的js导入一定要导入jQuery，并且jQuery放在bootstrap.min.js导入之前，因为Bootstrap 的...
Bootstrap 入门
我的的博客哦
05-08 4220
🔰框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。🔰前端常用的框架有 Bootstrap、Vue、Angular、React 等，既能开发 PC 端，也能开发移动端。🔰Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。
BootStrap之快速入门(一)
zzq的博客
03-11 305
文章目录 (一)BootStrap的基本概念 (二)BootStrap的快速入门
Bootstrap入门&全局CSS之概览&栅格系统
andrew_dear的博客
03-01 765
WWW What？ ①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 ②.是一个用于快速开发Web应用程序和网站的前端框架 ③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 Why？ ①.响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机） ②.移动设备优先 ③.浏览器支持
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值