【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_组件_分页条
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快速入门
康世行
02-07 2864
概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套页面可以兼容不同分辨率的设备。 目录 快速入门： 环境设置： ...
Bootstrap的快速入门
最新发布
2301_80638487的博客
06-18 1459
①Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集，它简洁灵活，使得web开发更加的便捷.②Bootstrap是一个建立一个页面,就可以在3三个终端(PC端、平板、手机)上完美展示的响应式前端框架。
快速入门bootstrap
txcy008的博客
10-22 945
bootstrap是框架会不会css 会 好,学会bootstrap(80%)!!! 框架特点三个: 样式,jq插件,响应式响应式响应式是用媒体查询结合一行十二列的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

南北极之间

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

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

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

打赏作者

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

抵扣说明：

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

余额充值