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

55 thoughts on “Bootstrap4.x 学习笔记

  • 2019-02-18 at 16:04
    Permalink

    这个写的不错。

    Reply
  • 2019-05-01 at 15:54
    Permalink

    Way cool! Some extremely valid points! I appreciate you penning this article
    plus the rest of the website is very good.

    Reply
  • 2019-05-01 at 18:29
    Permalink

    I always used to study paragraph in news papers but now as I am a user
    of web thus from now I am using net for content, thanks to web.

    Reply
  • 2019-05-01 at 20:17
    Permalink

    I’m gone to inform my little brother, that he should also pay a visit this weblog on regular basis to obtain updated from
    latest reports.

    Reply
  • 2019-05-03 at 08:11
    Permalink

    Do you mind if I quote a few of your articles as long as
    I provide credit and sources back to your site?
    My blog site is in the exact same area of interest as yours and my visitors would certainly
    benefit from some of the information you provide here.
    Please let me know if this alright with you. Thank you!

    Reply
  • 2019-05-04 at 00:35
    Permalink

    Hi there, You’ve done an incredible job. I will definitely digg it and personally suggest to my friends.
    I’m sure they will be benefited from this site.

    Reply
  • 2019-05-04 at 22:10
    Permalink

    WOW just what I was looking for. Came here by searching for gamefly
    free trial

    Reply
  • 2019-05-05 at 00:00
    Permalink

    I am curious to find out what blog platform you
    have been utilizing? I’m having some small security issues with my latest blog and I would like to find something more safe.

    Do you have any recommendations?

    Reply
  • 2019-05-05 at 14:43
    Permalink

    I do not even know how I ended up here, but I thought this post was great.

    I don’t know who you are but certainly you’re going to a famous blogger if you are not already 😉 Cheers!

    Reply
  • 2019-05-05 at 15:12
    Permalink

    Hi! I know this is kinda off topic but I’d figured I’d ask.
    Would you be interested in trading links or maybe guest authoring a blog article or vice-versa?

    My blog goes over a lot of the same subjects as yours and I feel we could greatly benefit from each other.
    If you’re interested feel free to send me an email.

    I look forward to hearing from you! Terrific blog by
    the way!

    Reply
  • 2019-05-06 at 03:17
    Permalink

    excellent issues altogether, you just received a logo
    new reader. What might you suggest in regards to your put up that
    you made a few days ago? Any certain?

    Reply
  • 2019-05-06 at 03:39
    Permalink

    Hi there i am kavin, its my first occasion to commenting anyplace, when i read this post i thought i could also create comment due to this good post.

    Reply
  • 2019-05-09 at 01:10
    Permalink

    Neat blog! Is your theme custom made or did you download it from somewhere?
    A theme like yours with a few simple tweeks would really make my blog shine.
    Please let me know where you got your design. Many thanks

    Reply
  • 2019-05-09 at 06:44
    Permalink

    First off I would like to say great blog! I had a quick question that I’d like to ask if you do not mind.
    I was curious to find out how you center yourself and clear your mind before writing.
    I have had a hard time clearing my mind in getting my thoughts out there.
    I do enjoy writing however it just seems like the first
    10 to 15 minutes are generally wasted simply just trying to figure out how to begin. Any suggestions
    or hints? Cheers!

    Reply
  • 2019-05-09 at 11:23
    Permalink

    Hello! I’ve been reading your site for some
    time now and finally got the courage to go
    ahead and give you a shout out from Lubbock Texas!
    Just wanted to say keep up the fantastic job!

    Reply
  • 2019-05-10 at 14:19
    Permalink

    Wow, awesome blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your website is
    magnificent, let alone the content!

    Reply
  • 2019-05-11 at 10:01
    Permalink

    Hey there would you mind sharing which blog platform you’re using?
    I’m going to start my own blog in the near future but I’m having a tough
    time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your layout seems different then most blogs and I’m looking for something completely unique.
    P.S Sorry for being off-topic but I had to ask!

    Reply
  • 2019-05-12 at 00:26
    Permalink

    At this moment I am going away to do my breakfast, when having my breakfast coming over again to read further news.

    Reply
  • 2019-05-12 at 10:51
    Permalink

    I know this if off topic but I’m looking into starting my own weblog and was wondering what all is needed to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very web smart so I’m not 100 certain. Any recommendations or advice would be greatly appreciated. Thank you|

    Reply
  • 2019-05-12 at 14:30
    Permalink

    I’m really impressed with your writing skills and also with the layout on your weblog.
    Is this a paid theme or did you customize it yourself?
    Anyway keep up the excellent quality writing, it’s rare to see a great blog like
    this one nowadays.

    Reply
  • 2019-05-12 at 23:40
    Permalink

    We stumbled over here coming from a different web address and thought I might as well check things out. I like what I see so now i’m following you. Look forward to looking over your web page for a second time.|

    Reply
  • 2019-05-13 at 03:18
    Permalink

    This design is spectacular! You obviously know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved
    to start my own blog (well, almost…HaHa!) Wonderful job.
    I really enjoyed what you had to say, and more than that, how you presented
    it. Too cool!

    Reply
  • 2019-05-13 at 08:11
    Permalink

    Hey there! I’ve been following your site for some time now and finally got the courage to go ahead and give you a shout out from New Caney Tx! Just wanted to tell you keep up the great job!|

    Reply
  • 2019-05-13 at 21:09
    Permalink

    Hello, just wanted to say, I loved this blog post.

    It was funny. Keep on posting!

    Reply
  • 2019-05-14 at 03:39
    Permalink

    Pretty section of content. I just stumbled upon your weblog and in accession capital to assert that I acquire actually enjoyed account your blog
    posts. Any way I will be subscribing to your feeds and even I achievement you access consistently rapidly.

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

    Ahaa, its good dialogue concerning this article at this place at this webpage,
    I have read all that, so at this time me also commenting
    here.

    Reply
  • 2019-05-14 at 17:25
    Permalink

    always i used to read smaller articles or reviews which as well clear their motive, and that is also happening with this
    piece of writing which I am reading now.

    Reply
  • 2019-05-15 at 09:14
    Permalink

    Heya i’m for the first time here. I found this board and I find It truly useful & it helped me
    out much. I hope to give something back and aid others like you aided me.

    Reply
  • 2019-05-15 at 09:30
    Permalink

    Your means of telling the whole thing in this article
    is in fact pleasant, all can easily know it,
    Thanks a lot.

    Reply
  • 2019-05-15 at 09:56
    Permalink

    Somebody necessarily lend a hand to make significantly articles I might state.
    That is the very first time I frequented your website page and thus far?
    I amazed with the research you made to create this particular
    submit amazing. Magnificent job!

    Reply
  • 2019-05-15 at 11:25
    Permalink

    Wow that was unusual. I just wrote an really long comment but after I clicked submit my comment didn’t show up.
    Grrrr… well I’m not writing all that over again. Anyhow, just wanted to say
    wonderful blog!

    Reply
  • 2019-05-15 at 20:44
    Permalink

    Howdy! I simply would like to offer you a huge thumbs up for
    the great info you have here on this post.
    I’ll be returning to your web site for more soon.

    Reply
  • 2019-05-16 at 00:12
    Permalink

    I’m not sure where you’re getting your information, but
    great topic. I needs to spend some time learning much more or understanding more.
    Thanks for wonderful info I was looking for this information for my mission.

    Reply
  • 2019-05-16 at 01:58
    Permalink

    My family members always say that I am killing my time here at net, except I know I am getting knowledge daily by reading such pleasant articles.

    Reply
  • 2019-05-16 at 02:09
    Permalink

    Valuable information. Lucky me I found your site accidentally, and I
    am surprised why this twist of fate did not came about in advance!
    I bookmarked it.

    Reply
  • 2019-05-16 at 02:28
    Permalink

    Hello colleagues, how is the whole thing, and what you would like to say
    concerning this piece of writing, in my view its
    genuinely remarkable in support of me.

    Reply
  • 2019-05-16 at 08:41
    Permalink

    What’s up everyone, it’s my first go to see at this website, and
    paragraph is really fruitful in favor of me, keep
    up posting these articles or reviews.

    Reply
  • 2019-05-16 at 12:21
    Permalink

    Its such as you learn my mind! You appear to grasp a
    lot approximately this, like you wrote the ebook in it or something.
    I believe that you simply can do with some % to pressure the message home a bit, but instead of
    that, that is excellent blog. A great read.
    I will certainly be back.

    Reply
  • 2019-05-16 at 16:28
    Permalink

    It is in reality a nice and useful piece of info. I’m glad
    that you simply shared this useful info with us. Please keep us up to date like this.
    Thanks for sharing.

    Reply
  • 2019-05-17 at 00:35
    Permalink

    I seriously love your site.. Pleasant colors & theme. Did you create this web site yourself? Please reply back as I’m looking to create my own personal website and want to know where you got this from or exactly what the theme is called. Thanks!|

    Reply
  • 2019-05-17 at 02:29
    Permalink

    I really like looking through an article that will make
    men and women think. Also, thanks for allowing me to comment!

    Reply
  • 2019-05-19 at 00:52
    Permalink

    Howdy very cool blog!! Man .. Excellent .. Amazing .. I will bookmark your web site and take the feeds also?
    I’m glad to find a lot of useful information here in the submit, we’d like develop extra strategies on this regard, thank you for sharing.
    . . . . .

    Reply

Leave a Reply to 昨日重现 Cancel reply

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