[Boostrap简介]如何制作时尚和响应的投资组合网站

很高兴见到你,Web工程师的ISOP@yuhiisk.)是。

在编写响应时,需要知道的知识,或者需要时间来确认和验证,看起来很容易和实际严重。

但是,即使没有专门知识,您也可以使用Bootstrap高效创建网站!
这一次,让我们实际上使用Bootstrap创建一个投资组合站点。

什么是举止?

BS-indro.

首先引导是一个名为CSS的CSS框架,JavaScript零件集合。

在Bootstrap,按钮,导航,下拉菜单中从头准备,您可以将它们组合在一起创建“简单”和“快速”的“高效”网站。

它的特征还表明,创建响应设计的站点是非常兼容的,因为考虑了与移动设备兼容的多方面。

投资组合网站制作这次

这一次,我现在将制作一个时尚的投资组合网站。

BS-Design.

由于从以下链接可以看到演示,我认为图像容易掌握。

演示网站

下载bootstrap.

让我们制作一个合适的文件夹来制作一个网站。

这次,您可以在桌面上创建一个引导程序-Demo文件夹。

桌面 /
└─引导 - 演示/

接下来,引导文件官方网站从中下载

BS-Download.

将下载的文件css,js和fonts文件夹复制到您在桌面上制作的引导展示文件夹。

准备index.html和style.css

在引导程序-demo文件夹中创建index.html。

引导官方由于网站上存在HTML模板,因此此时间将其复制并将其保存为index.html。

index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    
    <link href="//fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>


    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

这次,在网站标题等中使用的Web字体的CSS文件和在头部标签中读取在网站上单独使用的CSS文件。

index.html.

<link href="//fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

在CSS目录中创建Style.css。文件是空的,没有问题。

最后,文件配置如下。

桌面 /
└─引导 - 演示/
├├index.html.
├─CSS/
│├style.css.
│├├bootstrap.css
│├bootstrap.css.map.
│├bootstrap.min.css.
│├bootstrap.min.css.map.
│├├bootstrap-theme.css
││bootstrap-theme.css.map.
│├├bootstrap-thins.min.css
││bootstrap-theme.min.css.map.
├├js /
││botstrap.js.
││bootstrap.min.js.
││npm.js.
└─ff
├gglyphicons-halflings-ralal.eot
├─球蝇 - 半ralal.svg
├gglyphicons-halflings-ralal.ttf
├─球蝇 - 半环 - 常规。
└glyphicons-halflings-common.woff2

这已经准备好了。

让我们尽快制作一个网站!

1.主要形象

BS-Main

首先,我们将从主图像中取出。

在主图像部分中,使用称为jumbotron的引导部分。

BS-Jumbotron-Demo

Jumbotron是用于介绍页面主要内容的零件。

首先,让我们直接在身体标签下方放置Jumbotron。

index.html.

<div class="jumbotron">
    <h1>Cemal Can Dinça</h1>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">CONTACT ME</a></p>
</div>
BS-Jumbotron1.

如果你把它放在那样,两端都没有边缘,所以它有点不对。

在Jumbotron以下添加“集装箱液”。

index.html.

<div class="jumbotron">
    <div class="container-fluid">
        <h1>Cemal Can Dinça</h1>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">CONTACT ME</a></p>
    </div>
</div>
BS-Jumbotron2.

集装箱流体含有横向宽度,并在元件的两端设定边缘。
这很好。

然后使用快速视图的高度指定Jumbotron的高度,因此在CSS中指定高度。

在这里,Jumbotron增加了一个“Jumbotron-extend”的课程。

为什么添加类,如果将样式应用于Jumbotron的类本身,您将在整个网站上更改Jumbotron的风格,并且您将能够在初始状态下使用它。

index.html.

<div class="jumbotron jumbotron-extend">
	...
</div>

通过这样做,可以根据它覆盖CSS。

CSS指定:“Jumbotron-extend”如下:

style.css.

.jumbotron-extend {
    position: relative;
    height: 100vh;
    min-height: 300px;
}
BS-Jumbotron3.

高度:100VH. 通过指定,您可以将屏幕高。这VH. 该单元是一个单元,可以指定与浏览器的纵向显示区域不同的单位。通过将其设置为100 VH,您可以设置浏览器的高电平。这很方便!
此外,让我们在最小高度中指定最小高度。

接下来,在Jumbotron上设置背景图像。

style.css.

.jumbotron-extend {
    position: relative;
    height: 100vh;
    min-height: 300px;
    background: url(../img/main.jpg) no-repeat center center;
    background-size: cover;
}

背景图象在背景属性和背景大小属性中指定。

当屏幕通过将背景尺寸属性设置为覆盖时,在屏幕的整个区域上显示图像。

BS-Jumbotron4.

接下来,调整标题和按钮位置。

标题和按钮希望在垂直方向上位于垂直方向,因此调整CSS的CSS用于Contains-FIILD。

正如您所示,为集装箱流体添加类。

这次我们添加了“jumbotron-container”课堂。

index.html.

<div class="jumbotron jumbotron-extend">
    <div class="container-fluid jumbotron-container">
        ...
    </div>
</div>

CSS指定如下。

style.css.

.jumbotron-container {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
BS-Jumbotron5.

让我们调整标题的样式和此处链接按钮。

将类“站点名称”添加到标题的H1标记,并将类“BTN-Primary”和“BTN-LG”添加到“链接”按钮,添加“BTN-Black”的类新待办事项。

index.html.

<h1 class="site-name">Cemal Can Dinça</h1>
<p><a class="btn btn-black" href="#" role="button">CONTACT ME</a></p>

标签类BTN是Bootstrap中的常用按钮。更改基于此类。

style.css.

.site-name {
    margin-bottom: 40px;
    font-family: 'Playfair Display', serif;
}
.btn-black {
    border-radius: 0;
    background-color: #000;
    color: #fff;
    font-family: 'Avenir', serif;
}
.btn-black:hover {
     background-color: #fff;
     color: #000;
}
BS-Jumbotron6.

这个单独的是时尚!

最后,放置SNS按钮以使主图像进行主图像。

BS-Jumbotron7.

index.html.

<div class="jumbotron jumbotron-extend">
    <div class="container-fluid jumbotron-container">
        <h1 class="site-name">Cemal Can Dinça</h1>
        <p><a class="btn btn-black" href="#" role="button">CONTACT ME</a></p>
    </div>
    <div class="sns-button">
        <ul class="list-inline">
            <li><a href="#"><img src="img/icon_linkedin.png" alt="Linkedin"></a></li>
            <li><a href="#"><img src="img/icon_vimeo.png" alt="vimeo"></a></li>
            <li><a href="#"><img src="img/icon_tel.png" alt="tel"></a></li>
            <li><a href="#"><img src="img/icon_insta.png" alt="instagram"></a></li>
            <li><a href="#"><img src="img/icon_tumblr.png" alt="tumblr"></a></li>
        </ul>
    </div>
</div>

style.css.

.jumbotron-extend {
    height: 100vh;
    min-height: 350px;
    margin-bottom: 60px;
    background: url(../img/main.jpg) no-repeat center center;
    background-size: cover;
}
.jumbotron-container {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-left: 30px;
    padding-right: 30px;
}
.site-name {
    margin-bottom: 60px;
    font-family: 'Playfair Display', serif;
}
.btn-black {
    border-radius: 0;
    background-color: #000;
    color: #fff;
    font-family: 'Avenir', serif;
}
.btn-black:hover {
    background-color: #fff;
    color: #000;
}
.sns-button {
    position: absolute;
    bottom: 32px;
    left: 46px;
}

2.列布局

BS-栏

接下来,创建2列的内容区域。

HTML如下,因为放置了左列和右列。

index.html.

<main class="container-fluid contents">
    <div class="content-primary">
         ...
    </div>
    <div class="content-secondary">
         ...
    </div>
</main>

style.css.

.contents {
    max-width: 990px;
    margin: 0 auto;
}
.content-primary,
.content-secondary {
    padding-left: 0;
    padding-right: 0;
}
.content-primary {
    float: left;
    width: 52.08%;
}
.content-secondary {
    float: right;
    width: 37.92%;
}

“内容”围绕整个屏幕指定最大宽度,因为它想要将宽度固定为990px​​,如果屏幕宽度变为991 PX或更多。

此外,通过将左右列的宽度指定为百分比,当屏幕宽度缩小时,可以减小整个列,并且总是可以保持设计的比率。

该公式基于设计文件,例如PSD文件,左列是500px,因此可以通过将父元素的宽度除以作为参考来计算比率。

500px / 960px * 100 = 52.08%(十进制点第3位圆形圆形)

让我们计算右图。

364px / 960px * 100 = 37.92%(十进制点第3个地方圆形)

引导具有更易于使用的网格系统

实际上,Bootstrap可以轻松实现网格列,但这种设计没有使用左边和右图的宽度的宽度,因为引导无法响应。

但是,通过使用由引导提供的网格系统,让我们积极使用它,因为响应的生产非常容易。

如何使用详细使用官方文件请参阅。

3.文章清单

BS-list1.

接下来,让我们创建一个放置在左栏上的文章列表。
看起来很容易看到,实际上很容易。

配置分为标题和图像和文本区域。

bs-list2.

首先,让我们先装配HTML。

文章列表标记为文章标签。

index.html.

<article class="post-item">
    ...
</article>

接下来,它是列表的标题部分。

这是缩略图,姓名和上次更新日期。

这是bootstrap.媒体对象使用零件。

index.html.

<article class="post-item">
    <header class="media post-item-header">
        <div class="media-left">
            <a href="#">
                <img src="img/ph_avatar.png" alt="avatar" class="media-object">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Cemal Can Dinçq</h4>
            <p class="updated">Last Sunday at 11:03 AM <img src="img/instagram.png" alt="instagram" class="icon"></p>
        </div>
    </header>
	<div class="post-item-body">
        <div class="post-item-image">
            <img src="img/ph_post_01.jpg" alt="photo" class="img-responsive">
        </div>
        <h3>one</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam erat ligula, eu pretium tellus rutrum et. Etiam eget imperdiet enim, in luctus metus. Praesent a interdum eros. </p>
    </div>
</article>

这里,为了调整样式,标题标记指定“项目后标题”类。

此外,称为IMG标记的“IMG-responsive”的类是一类可以设置图像扩展和收缩的引导率。

如果要根据屏幕宽度更改图像的大小,请指定此类。

bs-list3.

这只是这个!

之后,调整每个边距或字体大小。

style.css.

.post-item {
    margin-bottom: 65px;
}
.post-item-header {
    margin-bottom: 20px;
}
.post-item-header .media-body {
    font-family: "Avenir", serif;
    vertical-align: middle;
}
.post-item-header .media-body .media-heading,
.post-item-header .media-body .updated {
    font-size: 20px;
}
.post-item-header .media-body .updated {
    margin-bottom: 0;
}
.post-item-header .media-body .updated .icon {
    margin: 0 10px;
    vertical-align: -1px;
}
.post-item h3 {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 36px;
    font-family: "Playfair Display", serif;
}
.post-item p {
    font-size: 21px;
}

最后,添加文章标记以显示每篇文章。

文章列表仅完成。

4.侧栏

BS方

来吧,下一栏。

它是一个简单的配置句子和图像。

index.html.

<div class="content-secondary">
    <div class="description">
        <p>Lorem ipsum dolor sit amet, consectetur...</p>
        <p class="lead">Ut facilisis turpis...</p>
        <p>Etiam rhoncus malesuada orci sed...</p>
    </div>
    <div class="feature-image"><img src="img/ph_post_05.jpg" alt="Photo" class="img-responsive"></div>
    <div class="feature-image clearfix">
        <div class="image"><img src="img/ph_post_06.jpg" alt="Photo" class="img-responsive"></div>
        <div class="image"><img src="img/ph_post_07.jpg" alt="Photo" class="img-responsive"></div>
    </div>
</div>

重点是指定读取句子的类别“rigen”的一部分,
此图像还设置为扩展和与“IMG-Responsive”进行签订合同。

style.css.

.description {
    margin-bottom: 30px;
}
.description .lead {
    margin-top: 25px;
    margin-bottom: 25px;
    font-family: "Myriad Pro", serif;
    font-size: 26px;
}
.feature-image {
    margin-bottom: 26px;
}
.feature-image .image {
    float: left;
    width: 45.6%;
}
.feature-image .image:nth-child(even) {
    float: right;
}

由于旁边排列的图像在上面的列布局中出现,
通过指定使用父元素宽度划分图像尺寸的百分比,图像将在保持设计比率的同时扩展和收缩。

BS-PC.

这完成了该网站!

5.移动支持

在当前状态下,它未在智能手机上显示。
优化到移动作为最后一个完成。其余的有点是!

这种移动符合程序的过程将显示与PC相同的内容,因此将主要支持CSS中的CSS大小以及利润率的协调。

使用CSS媒体查询将CSS添加到屏幕宽度。
媒体查询中的断点(切换边界)为768px,767px或更小,SP设计,768px或更多以及PC设计。

style.css.

// 既存のスタイルの後に追記
@media (max-width: 767px) {
    // 画面幅767px以下の場合のスタイルを記述
}

通过这样做,“@media(max-widey:767px){”以767px或更少…“”将覆盖现有样式的样式,您只能在智能手机等移动设备上应用CSS。

让我们调整每个区域。

主要形象

使Jumbotron 300px的高度并重置中间元素的垂直中心放置。

它还微调其他边距。

style.css.

@media (max-width: 767px) {
    .jumbotron-extend {
        height: 300px;
        min-height: 0;
        margin-bottom: 40px;
        text-align: center;
    }
    .jumbotron-container {
        top: 0;
        transform: translateY(0);
    }
    .site-name {
        margin-bottom: 40px;
    }
    .btn-black {
        margin-bottom: 20px;
    }
    .sns-button {
        position: static;
    }
}

列布局

释放左右列的浮点。

由于图像想要扩展全屏宽度,内容中的“IMG-responalive”侧向延伸。

style.css.

@media (max-width: 767px) {
    .contents {
        max-width: none;
    }
    .content-primary,
    .content-secondary {
        float: none;
        width: auto;
    }
    .contents p {
        font-size: 14px;
    }
    .contents .img-responsive {
        width: 100%;
        max-width: none;
    }
}

文章清单

每个边距或字体大小都是微调。

style.css.

@media (max-width: 767px) {
    .post-item {
        margin-bottom: 30px;
        padding-bottom: 25px;
        border-bottom: 1px solid #ccc;
    }
    .post-item-header .media-object {
        width: 31.5px;
        height: 31.5px;
    }
    .post-item-header .media-body .media-heading,
    .post-item-header .media-body .updated {
        font-size: 13px;
    }
    .post-item h3 {
        font-size: 18px;
    }
    .post-item p {
        font-size: 14px;
    }
}

纵横道

侧柱也适用于每种尺寸。

style.css.

@media (max-width: 767px) {
    .description .lead {
        font-size: 18px;
    }
    .feature-image {
        margin-bottom: 0;
    }
    .feature-image .image {
        width: 50%;
    }
}
BS-SP.

现在我能够回复移动设备。

时尚网站与自举!

它曾是怎样的?

通过使用此时间,可以快速有效地创建响应站点。

引入引导功能只能完成,但有很多方便的事情,所以如果你有兴趣官方网站文件请参考您尝试。

给这篇文章的人

イソップ

自由职业前端工程师在Niigata县活跃。一个食草的男孩,一个时尚的东西和一个可爱的女孩。@yuhiisk.