国内很多人写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:     

12 thoughts on “Bootstrap4.x 学习笔记

  • 2019-02-18 at 16:04
    Permalink

    这个写的不错。

    Reply
  • 2019-03-06 at 19:11
    Permalink

    Thank үou, I’ve jսst been seaching foг infоrmation approximawtely tһіs topic for a
    whіle and yourѕ is tһe greatest I have came upon tiⅼl now.
    Howеѵeг, what abouut the bottom ⅼine? Aree yߋu sure inn regɑrds to tһe supply?

    Reply
  • 2019-03-17 at 23:42
    Permalink

    Heⅼlo, i thіnk tһat i saw you visited my website tһus i came
    tо return the desire?.Ӏ’m tгying to іn finding issues tо enhance my website!І suppose its good enough tο use ɑ few
    of your ideas!!

    Reply
  • 2019-04-05 at 11:37
    Permalink

    Hi everyone, it’s my first go to see at this web site,
    and paragraph is genuinely fruitful in support of me, keep up
    posting these types of posts.

    Reply
  • 2019-04-07 at 13:02
    Permalink

    This post says so much more info than similar blogs, and it’s incredibly helpful to me. Will return to see more writing from you! mind if I share this?

    Reply
  • 2019-04-13 at 04:58
    Permalink

    I blog frequently and I seriously thank you for your content.
    This great article has truly peaked my interest.
    I will take a note of your website and keep checking
    for new information about once per week. I subscribed to your Feed as well.

    Reply
  • 2019-04-14 at 05:31
    Permalink

    Hi there, its nice post on the topic of media print,
    we all be familiar with media is a impressive source of information.

    Reply
  • 2019-04-15 at 12:06
    Permalink

    What’s Going down i’m new to this, I stumbled upon this I’ve discovered
    It positively useful and it has helped me out loads. I am hoping to give a contribution & aid other users like its helped me.

    Good job.

    Reply
  • 2019-04-16 at 09:38
    Permalink

    I have been surfing online more than 2 hours
    today, yet I never found any interesting article like yours.
    It is pretty worth enough for me. In my opinion, if all site owners and bloggers made good content as
    you did, the net will be a lot more useful than ever before.

    Reply

Leave a Reply

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