1. 技术文章
  2. 【笔记】《Bootstrap实战》——第2章 作品展示站点

【笔记】《Bootstrap实战》——第2章 作品展示站点

由 旧街凉风 提交于 2020-04-15 17:25:31

【推荐阅读】微服务还能火多久？>>>

文章目录

一、搭建传送带（轮播图）

文档：https://getbootstrap.com/docs/3.4/javascript/#carousel

文档中的示例：Carousel Template for Bootstrap

1.主要代码

  • 进度指示器
<div id="homepage-feature" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
        <li data-target="#homepage-feature" data-slide-to="1" ></li>
        <li data-target="#homepage-feature" data-slide-to="2" ></li>
        <li data-target="#homepage-feature" data-slide-to="3" ></li>
    </ol>
  • 图片项
    <div class="carousel-inner">
        <div class="item active">
            <img >
        </div>
        <div class="item ">
            <img >
        </div>
        ...
    </div>
  • 切换按钮
    <a class="left carousel-control" href="#homepage-feature" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#homepage-feature" data-slide="next">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
</div>

2.使用说明

  • https://getbootstrap.com/docs/3.4/dist/css/bootstrap.min.css
<!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
  • https://getbootstrap.com/docs/3.4/examples/carousel/carousel.css
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">

  • #homepage-feature：传送带主标识ID

  • .carousel：用于样式设置

  • data-target="#homepage-feature"：数据目标必须绑定主标识ID#homepage-feature

  • data-slide-to必须从0开始

  • active：可见项（js控制其循环）

  • .carousel-inner：传送项（可为图片或自定义内容）

  • .carousel-control：切换按钮

  • 调整自动切换时间5s到8s

$( document ).ready(function() {

	// Set carousel options
	$('.carousel').carousel({
	  interval: 8000 // 8 seconds vs. default 5
	});

});

二、创建响应式分栏

1.网格系统引入

文档：网格系统：https://getbootstrap.com/docs/3.4/css/#grid

  • Bootstrap内置12栏网格系统，col-12表示全宽，col-6表示半宽，col-4为1/3宽。类推
  • Bootstrap内置的浏览器屏幕断点：768px,992px,1200px
  • 小断点之上使用三栏，class=”col-sm-4”
<div class="container" accesskey="">
    <div class="row" accesskey="">
        <div class="col-sm-4">
            <h2>Welcome!</h2>
        </div>
        <div class="col-sm-4">
            <h2>Recent Updates</h2>
        </div>
        <div class="col-sm-4">
            <h2>Our Team</h2>
        </div>
    </div>
</div>

2.使用说明

  • container类 约束内容宽度，使其页面居中。
  • row类 包装3个栏，并留出左右外边距
  • container类和row类都设清除，可包含浮动元素的同时清除之前的浮动元素

三、链接转按钮

1.关键类说明

  • btn类：链接转按钮样式
  • btn-primary类：按钮变主品牌颜色
  • pull-right类：把链接浮动到右侧，使其占据更大空间，便于发现和点击

2.代码

<a class="btn btn-primary pull-right" href="#">文字内容</a>

四、理解LESS

Less 快速入门 | Less.js 中文文档 - Less 中文网

1.嵌套（Nesting）

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

转为css后：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

2.变量（Variables）

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

转为css后：

#header {
  width: 10px;
  height: 20px;
}

3.混合（Mixins）

  • 混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。定义了一个类（class）如下：
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
  • 在其它规则集中使用这些属性，只需输入所需属性的类（class）名称即可，如下所示：
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

4.运算（Operations）

  • 算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

5.导入（Importing）

  • 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉
@import "library"; // library.less
@import "typo.css";

五、定制LESS文件

1.准备工作

  • __main.less是bootstrap.less的副本
  • 复制variables.less到less根目录（和bootstrap同级）并重命名为_variables.less
  • 打开并修改如下对应部分内容：
// Grays
// -------------------------

@gray-darker:            #222;
@gray-dark:              #454545;
@gray:                   #777;
@gray-light:             #aeaeae;
@gray-lighter:           #ccc;
@gray-lightest:          #ededed;
@off-white:           	 #fafafa;
  • 修改变量@brand-primary的值
// Brand colors
// -------------------------

@brand-primary:         #c1ba62;

2.导入新变量

  • 打开 __main.less，导入_variables.less
  • 编译__main.less到css/main.css
  • 刷新index.html（按钮和导航栏颜色发生变化）

3.编辑导航条变量

@navbar-height:                    64px;
@navbar-margin-bottom:             0; // was @line-height-computed

@navbar-default-color:             @gray;
@navbar-default-bg:                #fff;
@navbar-default-border:            @gray-light; // darken(@navbar-default-bg, 9.5%);

// Navbar links
@navbar-default-link-color:                @navbar-default-color;
@navbar-default-link-hover-color:          @link-hover-color;
@navbar-default-link-hover-bg:             @off-white;
@navbar-default-link-active-color:         @link-hover-color;
@navbar-default-link-active-bg:            @gray-lightest;
@navbar-default-link-disabled-color:       @gray-lighter;
@navbar-default-link-disabled-bg:          transparent;
  • 第259行开始（或附近）
原值为： 
// Basics of a navbar
@navbar-height:                    50px;
@navbar-margin-bottom:             @line-height-computed;
...
@navbar-default-color:             #777;
@navbar-default-bg:                #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);

// Navbar links
@navbar-default-link-color:                #777;
@navbar-default-link-hover-color:          #333;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #555;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;
  • 保存修改、编译并刷新
  • 导航条效果：
    • 高度增加64px；
    • 背景颜色变白；
    • 底部边框变暗
    • 导航项背景悬停或活动时都变暗
    • 链接文本颜色悬停变色（#c1ba62）

六、添加Logo图片

1.加img

<a class="navbar-brand" href="index.html">Bootstrappin'</a>

替换为

<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="Bootstrappin'" width="120"></a>

2.调整导航条内边距

  • navbar.less->_navbar.less
  • 150行左右位置找到如下内容：
.navbar-brand {
  float: left;
  padding: @navbar-padding-vertical @navbar-padding-horizontal;
  • 修改padding为：
padding: 22px 30px 0 15px;
  • 替换__main.less中bootstrap/navbar.less为_navbar.less
  • 保存修改、编译并刷新
  • 查看，导航条已经对齐

七、调整导航项内边距

  • 在_navbar.less找到如下内容（第240行左右）：
// Uncollapse the nav
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    margin: 0;

    > li {
      float: left;
      > a {
        padding-top: ((@navbar-height - @line-height-computed) / 2);
        padding-bottom: ((@navbar-height - @line-height-computed) / 2);
      }
    }
  }
  • 替换相应内容为：
    > a {
        // padding-top: ((@navbar-height - @line-height-computed) / 2);
        // padding-bottom: ((@navbar-height - @line-height-computed) / 2);
        padding: 30px 30px 14px;
		    font-size: 18px;
      }
  • 保存修改、编译并刷新
  • 查看，导航项已经对齐logo基线

八、添加图标

1.使用BootStrap自带的Glyphicons

文档：https://getbootstrap.com/docs/3.4/components/#glyphicons

  • 文本前添加带有类名的span标签即可<span class="glyphicon glyphicon-iconname">
  <ul class="nav navbar-nav">
    <li class="active"><a href="index.html">
        <span class="glyphicon glyphicon-home"></span> Home
    </a></li>
    <li><a href="#">
        <span class="glyphicon glyphicon-picture"></span> Portfolio
    </a></li>
    <li><a href="#">
        <span class="glyphicon glyphicon-user"></span> Team
    </a></li>
    <li><a href="#">
        <span class="glyphicon glyphicon-envelope"></span> Contact
    </a></li>
  </ul>
  • 保存修改、编译并刷新
  • 查看，图标出现

2.使用Font Awesome图标

Font Awesome，一套绝佳的图标字体库和CSS框架

Font Awesome 中文网 – | 字体图标

Font Awesome

Github Font-Awesome

  • 下载：链接1
  • 复制Font Awesome的fonts文件夹的字体文件到项目的fonts文件夹
  • 复制Font Awesome的less文件夹的文件到项目的less/fontawesome文件夹
  • 在__main.less文件找到如下内容：
@import "bootstrap/glyphicons.less";

修改为：

// @import "bootstrap/glyphicons.less";
@import "font-awesome/font-awesome.less";
  • 确定font-awesome/variables.less中fonts路径是@fa-font-path: "../fonts";(这里的路径是相对编译后生成的的css文件而言的)
  • 保存修改、编译
  • 修改index.html的导航条部分：
  <ul class="nav navbar-nav">
    <li class="active"><a href="index.html">
        <span class="icon fa fa-home"></span> Home
    </a></li>
    <li><a href="#">
        <span class="icon fa fa-desktop"></span> Portfolio
    </a></li>
    <li><a href="#">
        <span class="icon fa fa-group"></span> Team
    </a></li>
    <li><a href="#">
        <span class="icon fa fa-envelope"></span> Contact
    </a></li>
  </ul>
  • 保存修改、刷新查看结果

九、调整导航项图标颜色

  • 在_navbar.less中找到选择符.navbar-default（注释// Alternate navbars下第360行左右），再找到如下内容：
  .navbar-nav {
    > li > a {
      color: @navbar-default-link-color;

      &:hover,
      &:focus {
        color: @navbar-default-link-hover-color;
        background-color: @navbar-default-link-hover-bg;
      }
    }
    > .active > a {
      &,
      &:hover,
      &:focus {
        color: @navbar-default-link-active-color;
        background-color: @navbar-default-link-active-bg;
      }
    }
    > .disabled > a {
      &,
      &:hover,
      &:focus {
        color: @navbar-default-link-disabled-color;
        background-color: @navbar-default-link-disabled-bg;
      }
    }
  }
  • 修改为
  .navbar-nav {
    > li > a {
      color: @navbar-default-link-color;

      .icon { // added rule set
      	color: @gray-light;
      }

      &:hover,
      &:focus,
      &:hover .icon, // added selector
      &:focus .icon { // added selector
        color: @navbar-default-link-hover-color;
        background-color: @navbar-default-link-hover-bg;
      }

    }
    > .active > a {
      &,
      &:hover,
      &:focus,
      .icon, // added selector
      &:hover .icon, // added selector
      &:focus .icon { // added selector
        color: @navbar-default-link-active-color;
        background-color: @navbar-default-link-active-bg;
      }
    }
    > .disabled > a {
      &,
      &:hover,
      &:focus {
        color: @navbar-default-link-disabled-color;
        background-color: @navbar-default-link-disabled-bg;
      }
    }
  }
  • 保存编译、刷新查看结果（图标颜色变浅）

十、调整响应式导航条断点

  • 表现：在480px左右会遇到导航项被挤到logo下方
  • 原因：窗口在@screen-md-min和@screen-sm-min，即768px~991px之间时，导航对于它的容器来说太宽。
  • 修改变量@grid-float-breakpoint的值为@screen-md-min（原值为@screen-sm-min）
  • 保存编译、刷新查看结果（bug解决）

十一、调整传送带

  • 复制一份carousel.less到less根目录，并重命名为_carousel.less
  • 修改修改__main.less里的导入文件为 _carousel.less（原为bootstrap/carousel.less）
  • _carousel.less开头注释修改为Customized Carousel

1.控件改用Font Awesome图标

  • index.html中，修改以下内容
<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#homepage-feature" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

为：

<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
    <span class="icon fa fa-chevron-left"></span>
</a>
<a class="right carousel-control" href="#homepage-feature" data-slide="next">
    <span class="icon fa fa-chevron-right"></span>
</a>
  • 找到_carousel.less文件中// Left/right controls for nav注释下的.carousel-control选择符，在其嵌套规则中找到注释// Toggles，添加如下内容（修改注释部分）：
// Toggles
  .icon-prev,
  .icon-next,
  .glyphicon-chevron-left,
  .glyphicon-chevron-right,
  .icon {  // added
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
  }
  .icon-prev,
  .glyphicon-chevron-left,
  &.left .icon { // added
    left: 20%; // edited was 50%
  }
  .icon-next,
  .glyphicon-chevron-right,
  &.right .icon { // added
    right: 20%; // edited was 50%
  }
  • 保存编译、刷新查看结果（Font Awesome图标粉墨登场）

2.添加上下内边距

  • 在_carousel.less文件开头相应位置添加如下内容：
.carousel {
  position: relative;

  padding-top: 4px; // added
  padding-bottom: 28px; // added
  background-color: @gray-lighter; // added

}
  • 保存编译、刷新查看结果（图片上下各出现亮灰色背景）

3.强制图片全宽

  • 找到.carousel-inner的注释// Account for jankitude on images下的如下内容：
    > img,
    > a > img {
      .img-responsive();
      line-height: 1;
    }

修改为：

    > img,
    > a > img {
      .img-responsive();
      line-height: 1;
      min-width: 100%; // added
    }

  • 保存编译、刷新查看结果

  • 注：也可用响应式图片方案

4.约束传送带高度

  • 找到.carousel-inner的如下内容：
  > .item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);

    // Account for jankitude on images
    > img,
    > a > img {
      .img-responsive();
      line-height: 1;
      min-width: 100%; // added
    }
  }

修改为：

  > .item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);

    max-height: 640px; // added

    // Account for jankitude on images
    > img,
    > a > img {
      .img-responsive();
      line-height: 1;
      min-width: 100%; // added
      // adding media queries to position images
      @media (min-width: @screen-md-min) {
        margin-top: -40px;
      }
      @media (min-width: @screen-lg-min) {
        margin-top: -60px;
      }
    }
  }
  • 保存编译、刷新查看结果
  • 注：@media这里使用了嵌套媒体查询

5.重定位指示器

  • 找到.carousel-inner的如下内容：
.carousel-indicators {
  position: absolute;
  bottom: 10px;

修改为：

.carousel-indicators {
  position: absolute;
  bottom: 0; // edited
  margin-bottom: 0; // added
  • 此时大屏幕上不起作用，找到如下位置：
// Move up the indicators
  .carousel-indicators {
    bottom: 20px;
  }

注释掉。

  • 保存编译、刷新查看结果

6.调整指示器外观

  • 打开_variables.less文件，找到在注释// Carousel后下面两行代码
@carousel-indicator-active-bg:                #fff;
@carousel-indicator-border-color:             #fff;

修改变量值为如下：

@carousel-indicator-bg:						  @gray-light; // added
@carousel-indicator-active-bg:                @gray-lightest; // edited
@carousel-indicator-border-color:             transparent; // edited

保存

  • 打开_carousel.less文件，找到.carousel-indicators选择器，修改其中的li选择器的属性，如下：
li {
    display: inline-block;
    width:  10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    border: 1px solid @carousel-indicator-border-color;
    border-radius: 10px;
    cursor: pointer;

修改为：

li {
    display: inline-block;
    width:  18px; // edited
    height: 18px; // edited
    // margin: 1px; // edited
    text-indent: -999px;
    background-color: @carousel-indicator-bg; // added
    // border: 1px solid @carousel-indicator-border-color;
    border-radius: 10px;
    cursor: pointer;
  • 并注释掉两个针对IE8-9的属性
// background-color: #000 \9; // IE8
// background-color: rgba(0,0,0,0); // IE9
  • 再注释掉下面.active选择器下的如下几条属性（下面已注释）：
.active {
    // margin: 0;
    // width:  12px;
    // height: 12px;
    background-color: @carousel-indicator-active-bg;
  }
  • 最后与.active选择器并列添加一个:hover选择符，增加悬停效果：
}
  li:hover, // added
  .active {
  • 保存编译、刷新查看结果（指示器颜色改变，形状变大）

十二、调整分栏及其内容

1.为链接添加 font-awesome 图标

  • 打开index.html，添加后如下：
<p><a class="btn btn-primary pull-right" href="#">See our portfolio<span class="icon fa fa-arrow-circle-right"></span></a></p>
  • 每个都如此添加

2.增加文本栏与传送带的垂直内边距

  • 在less文件夹根目录创建新less文件_page-contents.less，并添加如下内容：
//
// Page Contents
// --------------------------

.page-contents {
	padding-top: 20px;
	padding-bottom: 40px;

	@media (max-width: @screen-xs-max) { // fits within col-sm-min in markup
		[class^="col"] {
			clear: both;
			padding-bottom: 40px;
		}
	}
}
  • 此文件用来为页面内容添加额外改动
  • 保存，编译
  • 在index.html中，找到含container类的div标签，增加page-contents类，如下：
<div class="page-contents container" accesskey="">
  • 保存，刷新查看结果（文本栏之间垂直边距拉开）。
  • 这里用到的媒体查询的变量@screen-xs-max在_variables.less第239行左右

十三、修饰页脚

  • 查询Font Awesome文档的Brand Icons部分，找到需要的图标，添加到index.html
<ul class="social">
  <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
  <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
  <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
  <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
  <li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li>
</ul>
  • 为了使图标水平居中排列，在less根目录新建_footer.less文件
//
// Footer
// ---------------------------

footer[role="contentinfo"] {
	padding-top: 24px;
	padding-bottom: 36px;
	text-align: center;
}

ul.social {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	> li {
			display: inline-block;
		> a {
			display: inline-block;
			font-size: 18px;
			line-height: 30px;
			.square(30px);
	    border-radius: 36px;
			background-color: @gray-light;
			color: #fff;
			margin: 0 3px 3px 0;
			&:hover {
				text-decoration: none;
				background-color: @link-hover-color;
			}
		}
	}
}
  • 保存，编译，刷新查看结果。

十四、总结

  • 接下来优化：
    • __main.less中注释掉不需要的less文件，重新编译，然后完成css非格式化，进一步压缩大小
    • 把之前复制进plugins.js文件中的bootstrap.min.js替换成项目中用到的carousel.js、collapse.js、transitions.js
  • 项目完善优化
    • 附录A 优化站点资源
    • 附录B 实现响应式图片
    • 附录C 让传送带支持手势
  • 完成效果：http://oliverdada.gitee.io/sample_bootstrapsiteblueprints/Chapter 2/02_Code_COMPLETE/

Less教程™

onc-virn
发布了34 篇原创文章 · 获赞 83 · 访问量 2万+
私信 关注
标签
navbar
prism
FontAwesome
Amp
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!