【笔记】《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.lesscss/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.lessbootstrap/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 Awesomefonts文件夹的字体文件到项目的fonts文件夹
  • 复制Font Awesomeless文件夹的文件到项目的less/fontawesome文件夹
  • 在__main.less文件找到如下内容:
@import "bootstrap/glyphicons.less";

修改为:

// @import "bootstrap/glyphicons.less";
@import "font-awesome/font-awesome.less";
  • 确定font-awesome/variables.lessfonts路径是@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.lessless根目录,并重命名为_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.jscollapse.jstransitions.js
  • 项目完善优化
    • 附录A 优化站点资源
    • 附录B 实现响应式图片
    • 附录C 让传送带支持手势
  • 完成效果:http://oliverdada.gitee.io/sample_bootstrapsiteblueprints/Chapter 2/02_Code_COMPLETE/

Less教程™

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