BootStrap4基础学习

最新推荐文章于 2025-08-22 11:32:18 发布

原创最新推荐文章于 2025-08-22 11:32:18 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端

前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何引入Bootstrap和jQuery，设置本地服务器，以及使用Bootstrap的container、col、row组件进行响应式布局设计。同时，深入探讨alert组件的使用，包括渐变效果、字体颜色匹配和JavaScript监听事件。

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

引入

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

设置本地服务器

cnpm init -y
cnpm add browser-sync
cnpm start

"start": "./node_modules/.bin/browser-sync start --server --no-notify --files='index.html, *.css, *.js'"

知识点

container
```
<div class="container demo">
    <h1>Hello ~</h1>
</div>
```
提供一个固定宽度，container-flued提供一个流动宽度
col row . row 为container里面的行,col为列 ,每个row长度为12,使用"col-n"来制定长度为n的col.对row;垂直对齐:"row align-items-位置"设置对齐方式.对col"align-self-start"设置单独的对齐方式.位置为start, center, end; 水平对齐:"justify-content-位置",　剩余空间分配在栏中间:"between", 周围:"around".
尺寸:分为xs,sm,md,lg,xl. 对应560,768,900,1200四个分界线:使用"col-尺寸号-格数" ."col-sm"添加后窗口小于sm则多行显示.

alert

        <div class="alert alert-primary fade show" role="alert">
            <h4>Hello</h4>
            hello ~ <a href="#" class="alert-link"> see more</a>
            <button class="close" data-dismiss="alert">
                &times;
            </button>
        </div>

alert-link使得字体颜色自动匹配框架颜色，fade,show使得关闭过程中有渐变效果

$(document).ready(() => {

    $('.close-alert').click(() => {
        $('.alert').alert('close')
    })//关闭

    $('.alert').on('close.bs.alert',  () => {
        console.log('helo')
    });//关闭时
    $('.alert').on('closed.bs.alert',  () => {
        console.log('helo1')
    });//关闭后
})

js监听效果