国内很多人写bootstrap教程,我觉得写得都太烂了,一般人看了也学不会,我来个简单点的。

安装 Bootstrap(快速安装)

如官网上说的,用CDN的方式应该是最快的,创建一个index.html文件,如下代码就可以使用BS4了。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

使用NPM安装 Bootstrap 4

这里我们使用这种方式安装BS4,主要是加深大家的理解。

首先确保你的nodejs装好了。

node -v
v10.15.0

创建一个项目目录,开始工作,我的目录叫做 test

npm init -y

初始化 npm ,上面的命令会生成一个 package.json 文件。

继续安装开发需要的一些依赖包。

npm install gulp browser-sync gulp-sass --save-dev
  • gulp:是一个js的任务运行工具;
  • browser-sync: 会在文件更改时自动刷新浏览器;
  • gulp-sass :为项目启用sass编译。

再最后一次运行下面的命令:

npm install bootstrap jquery popper.js --save
  • bootstrap:这就是bootstrap的包;
  • jquery:bootstrap要使用这个包;
  • popper.js :bootstrap也要使用这个包。

好了,搞定了上面的话,我们现在开始在根目录(test)下创建几个文件夹。

/src
    /assets
    /css
    /js
    /scss

最后在src目录下创建 index.html,代码如下:

<!DOCTYPE html>
<html class="no-js" lang="zh">
    <head>
        <title>Bootstrap 4 布局</title>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/styles.css">
    </head>

    <body>
        <script src="/js/jquery.min.js"></script>
        <script src="/js/popper.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
    </body>
</html>

另外在 scss 目录下创建一个 styles.scss 的文件。

$bg-color: red; 

body {
    background: $bg-color;
}

创建 gulpfile.js 文件。

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass', function() {

    browserSync.init({
        server: "./src"  
    });
    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss','src/scss/*.scss'],gulp.series('sass'));
    gulp.watch("src/*.html").on('change', browserSync.reload);
}));

gulp.task('default', gulp.parallel('js','serve'));

命令行,直接输入:

gulp

自动会打开你的浏览器,你就可以看到一个红色的背景了。

网格容器

Bootstrap 4项目的起点几乎总是围绕网格容器展开。.container 类允许我们水平居中布局。对于流体布局(100%宽度),我们可以使用.container-fluid。

<body>
        <div class="container">
            test
        </div>

        ...省略3个script标签
</body>

记住,把styles.scss里面的东西删除掉。

定义 Bootstrap 4 的导航栏

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="#">纬业信息</a>
        
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">主页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">产品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系我</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

上面的代码在 bootstrap官网很多示例,我这里把产品改成下拉列表。

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">产品</a>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">产品 1</a>
	<a class="dropdown-item" href="#">产品 2</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="#">另一个产品</a>
    </div>
</li>

搞好了后界面如下图:

首页

怎么样是不是很简单?上面的网页还不能给移动端用,我们继续增加一段代码,让他在移动端也能用,如下:

<a class="navbar-brand" href="#">纬业信息</a>

<!--加在这 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
    <span class="navbar-toggler-icon"></span>
</button>
<!--加在这 -->

<div class="collapse navbar-collapse" id="navbarSupportedContent">

手机端调试直接用 Google 浏览器的检查元素功能。

手机端

集成 (Jumbotron)

这个东西我不知道专业术语叫啥,反正就是导航栏下面的一个类似简介的部分,做出来了你就知道,看代码。

...
</nav>

<!-- 加到这 -->

<div class="jumbotron">
    <h1 class="display-4">简单、优雅、漂亮</h1>
    <p class="lead">曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。如果非要在这份爱上加上一个期限,我希望是……一万年!</p>

    <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">更多信息</a>
    </p>
</div>
Jumbotron

Bootstrap 4 网格系统

这个应该是BS4最重要的部分,我加几个卡片试试。

<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-body text-center">
                <h5 class="card-title">标题一</h5>
                <p class="card-text">一万年太久,只争朝夕!毛主席!</p>
                <a href="#" class="card-link">再一个链接</a>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body text-center">
                <h5 class="card-title">标题二</h5>
                <p class="card-text">昨夜雨疏风骤,浓睡不消残酒,试问眷恋人,却道海棠依旧!</p>
                <a href="#" class="card-link">再一个链接</a>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body text-center">
                <h5 class="card-title">标题三</h5>
                <p class="card-text">白日依山尽,黄河入河流。欲穷千里目,更上一层楼。</p>
                <a href="#" class="card-link">再一个链接</a>
            </div>
        </div>
    </div>
</div>

如下图:

卡片
<div class="row">
    <div class="col">
        ...
    </div>
    <div class="col-6">
        ...
    </div>
    <div class="col">
        ...
</div>
col-6

上面的在手机端显示不是很好,所以再设置一个移动端的。

<div class="row">
    <div class="col-sm-12 col-md-4">
        <div class="card">

自己可以切换到移动端试试。

Bootstrap 4的 Margins 和 Padding

  • m 代表 margin  p 代表 padding
  • 紧跟着 m 或 p 你还可以继续加: t (top), b (bottom), l (left), r (right), x (left and right), y (top and bottom), 或者啥都不加代表 4个方向。
  • 在连字符后,指定大小0到5(5是最大间距量)

我们给标题一的卡片,添加一个间隙。

<div class="card mb-4">

Bootstrap 左侧栏目

我们继续在左边增加一个区块。

<div class="row mt-sm-4 mt-md-0">
    <div class="col-sm-12 col-md-8">
        <h3>一个重要的标题</h3>
        <p class="lead">一种重要的小标题可以放在这里,它更大,更灰。</p>

        <p>微风吹拂着江岸的细草,那立着高高桅杆的小船在夜里孤零地停泊着。星星垂在天边,平野显得宽阔;月光随波涌动,大江滚滚东流。我难道是因为文章而著名吗?年老病多也应该休官了。自己到处漂泊像什么呢?就像天地间的一只孤零零的沙鸥。</p>
        <p>你难道看不见,那黄河之水那从天上奔腾而来,波涛翻滚直奔东海,再也没有回来。你难道看不见,那年迈的父母,对着明镜悲叹自己的衰老的白发,年轻时的满头青丝如今已是雪白一片。人生得意之时就应当纵情欢乐,不要让这金杯无酒空对明月。每个人的出生都一定有自己的价值和意义,黄金千两(就算)一挥而尽,它也还是能够再得来。我们烹羊宰牛姑且作乐,(今天)一次性痛快地饮三百杯也不为多!</p>
    </div>

    <div class="col-sm-12 col-md-4">
        垂直菜单一会儿放这里。
    </div>
</div>

加上移动端适应。

<div class="col-sm-12 col-md-8 text-sm-center text-md-left">

Bootstrap 4 垂直导航

我们继续在右侧增加一个垂直导航。

<div class="col-sm-12 col-md-4">
        <h3 class="mb-4">二级菜单</h3>

        <ul class="nav flex-column nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>

搞好了,如下图:

全图

Bootstrap 4 自定义

直接在scss文件中写你想自定义的东西就行。

Bootstrap4.x 学习笔记
Tagged on:     

2 thoughts on “Bootstrap4.x 学习笔记

Leave a Reply

Your email address will not be published. Required fields are marked *