【Bootstrap】bootstrap快速入门

Bootstrap实战指南
最新推荐文章于 2024-06-18 21:32:55 发布
最新推荐文章于 2024-06-18 21:32:55 发布
阅读量927 收藏 10
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_22182989/article/details/90144419
本文详细介绍了如何使用Bootstrap框架创建美观的网页布局，包括按钮、表单、表格、响应式设计等组件的使用方法，并展示了如何利用Bootstrap的全局样式、排版元素和列表组件来提升网站的视觉效果。

 

 

 

下载：

 

安装后：有3个文件夹：

css，字体，js

jQuery需要自己下载

********

新建一个文件：

成功。

第一个bootstrap文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <button class="btn btn-info">
        Hello World!!!Hello Yukky!Hello Bootstrap!
    </button>
</body>
</html>

效果：


*******************

bootstrap中的全局样式

排版-标题：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <h1>标题一，观察大小变化<small>小标题</small></h1>
    <h2>标题一，观察大小变化<small>小标题</small></h2>
    <h3>标题一，观察大小变化<small>小标题</small></h3>
    <h4>标题一，观察大小变化<small>小标题</small></h4>
    <h5>标题一，观察大小变化<small>小标题</small></h5>
    <h6>标题一，观察大小变化<small>小标题</small></h6>

    <hr/>
    <p class="h1">标题一，观察大小变化</p>
    <p class="h2">标题一，观察大小变化</p>
    <p class="h3">标题一，观察大小变化</p>
    <p class="h4">标题一，观察大小变化</p>
    <p class="h5">标题一，观察大小变化</p>
    <p class="h6">标题一，观察大小变化</p>
</body>
</html>

效果：


 

排版-文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
    <p>
        <mark>登鹳雀楼</mark>
        登鹳雀楼
    </p>
    <p>
        <del>唐代诗人：</del>
    </p>
    <p>
        <ins>王之涣</ins>
    </p>
    <p><u>白日依山尽，</u>
        <small>黄河入海流。</small>
    </p>
    <p>欲穷千里目，<strong>更上一层楼。</strong></p>
    <p>登鹳雀楼
        唐代：王之涣

        白日依山尽，黄河入海流。
        欲穷千里目，更上一层楼。
    </p>
    <p class="text-left">更上一层楼</p>
    <p class="text-center">更上一层楼</p>
    <p class="text-right">更上一层楼</p>

    <p class="text-lowercase">HELLO!本来是大写</p>
    <p class="text-uppercase">hello!本来是小写</p>
    <p class="text-capitalize">把hello第一个字母大写</p>
</body>
</html>

效果：

排版-表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
            <th>标题四</th>
            <th>标题五</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
            <td>内容五</td>
        </tr>
        <tr>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
            <td>内容五</td>
        </tr>
        <tr class="active">
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
            <td>内容五</td>
        </tr>
        <tr class="success">
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
            <td>内容五</td>
        </tr>
        <tr class="info">
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
            <td>内容五</td>
        </tr>
        <tr class="waring">
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
            <td>内容五</td>
        </tr>
        <tr class="danger">
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
            <td>内容五</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

效果：

*************

表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
    <form class="form-inline">
        <div class="form-group form-success">
            <label for="">这是一个输入框：</label>
            <input type="text" class="form-control input-lg " placeholder="这是一个输入框："/>
        </div>
        <div class="form-group has-warning">
            <label class="control-label" for="">这是一个输入框：</label>
            <select class="form-control">
                <option value="">北京</option>
                <option value="">北京</option>
                <option value="">北京</option>
                <option value="">北京</option>
                <option value="">北京</option>
            </select>
        </div>
        <div class="form-group has-error">
            <label class="control-label" for="">这是一个输入框：</label>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </div>
    </form>
</body>
</html>

效果：

***************

各种按钮效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
    <button class="btn btn-default btn-lg">这是一个不一样的按钮</button>
    <button class="btn btn-success btn-sm">这是一个不一样的按钮</button>
    <button class="btn btn-primary active">这是一个不一样的按钮</button>
    <button class="btn btn-info btn-block">这是一个不一样的按钮</button>
    <button class="btn btn-danger" disabled="disabled">这是一个不一样的按钮</button>
    <button class="btn btn-warning">这是一个不一样的按钮</button>
    <button class="btn btn-link">这是一个不一样的按钮</button>
    <a class="btn btn-warning" href="">这是a标签写的按钮</a>
</body>
</html>

效果：

***********

*****************

viewport：响应式

***************

列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

</head>
<body>
<ul class="list-group">
    <li class="list-group-item active">这是一个列表<span class="badge">消息数10</span></li>
    <li class="list-group-item disabled">这是一个列表<span class="badge">消息数10</span></li>
    <li class="list-group-item list-group-item-info">这是一个列表<span class="badge">消息数10</span></li>
</ul>
</body>
</html>

效果：

*****************

面板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

</head>
<body>
    <div class="panel panel-primary">
        <div class="panel-heading">弹出层</div>
        <div class="panel-body">这是面板的具体内容</div>
        <div class="panel-footer">这是脚注</div>
    </div>
</body>
</html>

效果：

*******************

插件-引用

先jQuery再bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

</head>
<body>
<button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#danger" >这是测试按钮</button>
<div id="danger"  class="modal" >这是一个内容，点2次观察变化</div>
</body>
</html>

效果：

**********

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Bootstrap入门教程一Hello Bootstrap初识
01-19
Bootstrap是基于 HTML5、CSS3和Javascriopt开发的，它在 jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件，为实现快速开发提供了一套前端工具包，包括丰富的...
BootStrap入门案例.zip
10-11
这个“BootStrap入门案例.zip”压缩包包含了多个文件，它们提供了关于使用Bootstrap学习的基础教程和实例。 首先，让我们逐一了解这些文件： 1. **01_BootStrap_HelloWorld.html** - 这个文件很可能是Bootstrap的...
Bootstrap快速入门
weixin_34279246的博客
05-25 179
Bootstrap学习有两个重点，一个是概念的理解，理解bootstrap是如何通过div来代替过去的table布局的；一个是常用结构的熟悉，做到需要的组件及时能找到，组合一下就可以满足需求。学习后的最大感受就是：bootstrap让前端布局和渲染的工作，由填空题变成了选择题。即便没有很强的审美能力，也可以让网页简洁大方，颜值爆表。 概念 BootStrap是由Twitter的两位员工Mark ...
bootstrap
weixin_30680385的博客
10-26 153
屏幕尺寸(宽度) 超小屏幕，宽度 < 768， 如：手机 小型屏幕，768 <= 宽度 < 992，如：平板 中等屏幕，992 <= 宽度 < 1200，如：电脑 超大屏幕，宽度 >= 1200，如：电视 响应式布局 根据不同的客户端显示不同的效果，就称为响应式布局。 由于移动设备访问网站的比...
bootstrap如何引入
enthan809882的博客
10-26 4742
在页面的标签中加入如下代码即可： <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAky...
Bootstrap_组件_分页条
zhangnan456的博客
08-29 222
<!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快速入门GitChat1
08-03
在Bootstrap快速入门中，首先需要了解其基本结构。Bootstrap的核心元素包括网格系统、导航、表单、按钮、图像、JavaScript插件等。网格系统是Bootstrap布局的基础，它基于12列的响应式栅格，允许开发者创建灵活的...
Bootstrap快速入门.pdf
08-19
这个框架由Twitter的开发者创建，提供了一系列预先设计的CSS、JS组件和HTML模板，可以帮助开发者快速而美观地创建网页布局。 在提供的代码片段中，我们可以看到几个关键的Bootstrap元素： 1. **引入Bootstrap CSS*...
BootStrap入门教程[汇编].pdf
10-11
BootStrap入门教程 BootStrap 是一套由 Twitter 的工程师创造的前端工具集，用于构建易用、优雅、灵活、可扩展的用户界面和交互接口。BootStrap 的主要特性有友好的学习曲线、卓越的兼容性、响应式设计、12 列格网...
bootstrap快速入门
晴夏的博客
04-09 324
1、Bootstrap 介绍 Bootstrap 是目前最受欢迎的前端框架，涵盖了页面开发的大部分css布局功能，js的特效功能，使得 Web 开发更加快捷。Bootstrap中先定义好了样式和特效，如果需要直接通过class和其他的属性进行调用。 2、导入 Bootstrap的js导入一定要导入jQuery，并且jQuery放在bootstrap.min.js导入之前，因为Bootstrap 的...
BootStrap快速入门
m0_51892736的博客
09-04 492
BootStrap很全面
Bootstrap的快速入门
最新发布
2301_80638487的博客
06-18 1459
①Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集，它简洁灵活，使得web开发更加的便捷.②Bootstrap是一个建立一个页面,就可以在3三个终端(PC端、平板、手机)上完美展示的响应式前端框架。
快速入门Bootstrap视频教程全套
视频教程《Bootstrap 视频教程》被设计为入门级学习材料，旨在让初学者能够快速学习并掌握 Bootstrap 的使用方法。本教程通过一系列视频内容涵盖了从基础到一些高级功能的各个方面。 在学习 Bootstrap 视频教程之前...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值