【学习笔记】前端开发库项目笔记

Love__Tay

已于 2024-04-21 21:51:47 修改

阅读量755

点赞数 9

文章标签：学习笔记前端 bootstrap jquery scss

于 2024-04-16 14:47:48 首次发布

本文链接：https://blog.csdn.net/Love__Tay/article/details/137816755

版权

文章目录

前言
一、Bootstrap
二、jQuery
三、Sass

前言

前端开发库学习笔记，仅供参考交流，如有侵权，请联系删除。

一、Bootstrap

1 简介

Bootstrap 一个是用于设计响应性网页和应用程序的前端框架。它对网页开发采用移动优先的方法，具有预定义的 CSS 样式和 class，以及一些 JavaScript 功能。

2 笔记

引入Bootstrap

任何 Web 应用，都可以通过添加如下代码到 HTML 顶部来引入 Bootstrap 。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

使图片自适应移动端

通过 Bootstrap，仅需要为 image 标签上设置 class 属性为 img-responsive ，就可以让它完美地适应你的页面宽度。

<img class="img-responsive" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">

用 Bootstrap 居中文本

要将元素的 class 属性设置为 text-center 就可以实现文本居中：

<h2 class="red-text text-center">your text</h2>

创建一个 Bootstrap 按钮

Bootstrap 的 button 元素有着独有的、比默认 HTML 按钮更好的样式风格。

<button class="btn btn-default">Like</button>

一般情况下，btn 和 btn-default 两个 classes 修饰的 button 元素宽度与它包含的文本相同，即这个按钮的宽度应该和文本 Like 的宽度相同。

创建一个 Bootstrap 块级元素按钮

通过为按钮添加 class 属性 btn-block 使其成为块级元素，按钮会伸展并填满页面的整个水平空间，后续的元素会流到这个块级元素的下方，即 “另起一行”。

<button class="btn btn-default btn-block">Submit</button>

这个按钮会 100% 占满所有的可用宽度

体验 Bootstrap 按钮的不同主题

<button class="btn btn-primary btn-block">Like</button>

btn-primary class 的颜色是应用的主要颜色。这样 “突出显示” 是引导用户按部就班进行操作的有效办法。

可选操作样式 btn-info

<button class="btn btn-block btn-info">Info</button>

使用 btn-danger 提示危险操作

<button class="btn btn-block btn-danger">Delete</button>

在这里插入图片描述

使用 Bootstrap Grid 并排放置元素

Bootstrap 具有一套 12 列的响应式栅格系统，可以轻松地将多个元素放入一行并指定它们的相对宽度。
Bootstrap 有不同的列宽属性，它根据用户的屏幕宽度来使用相应的宽度。

以 Bootstrap 的 col-md-* class 为例，在这里， md 表示 medium （中等的），而 * 是一个数字，说明了这个元素占有多少个列宽度。这个例子就是指定了中等大小屏幕（例如笔记本电脑）下元素所占的列宽度。
在 Cat Photo App 中，将使用 col-xs-* ，其中 xs 是 extra small 的缩写 (比如窄屏手机屏幕)， * 是填写的数字，代表一行中的元素该占多少列宽。

<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
  <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>

替换自定义的 Bootstrap 样式

text-primary 字体颜色样式

<h2 class="text-primary text-center">CatPhotoApp</h2>

img-responsive 图片大小样式

<img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

使用 span 创建行内元素

<p>Things cats <span class="text-danger">love</span>:</p>

给 span 元素设置 class text-danger，使文本love变成红色。

创建自定义标题：文字+图片

利用Bootstrap的响应式栅格系统，把标题和图片放到一行并指定元素的相对宽度：

<div class="row">
    <div class="col-xs-8"><h2 class="text-primary text-center">CatPhotoApp</h2></div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
    </div>

在按钮中添加字体图标

Font Awesome 是一个非常便利的图标库。我们可以通过 webfont 或矢量图的方式来使用这些图标。这些图标就和字体一样，不仅能通过像素单位指定它们的大小，它们也同样会继承父级 HTML 元素的字号。

引入 Font Awesome 图标库，在head标签中添加：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

使用图标，可以通过i元素或span元素：

<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i>Like</button>

使用 Font Awesome 来为我们的点赞按钮添加一个 thumbs-up 图标，只需添加一个 class 包含 fas 和 fa-thumbs-up 的 i 元素即可。

将字体图标添加到所有按钮上

为 info 按钮添加 Font Awesome info-circle 图标，delete 按钮添加 trash 图标。

<button class="btn btn-block btn-info"><i class="fas fa-info-circle"></i> Info</button>

<button class="btn btn-block btn-danger"><i class="fas fa-trash"></i> Delete</button>

在这里插入图片描述

响应式风格的单选按钮

利用Bootstrap的响应式栅格系统，指定宽度为col-xs-6：

<div class="row">
    <div class="col-xs-6"><label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
    <div class="col-xs-6"><label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
</div>

这样就可以在不关心屏幕大小的情况下，将单选按钮均匀的平铺在页面上。

给表单输入框添加样式：占满一行

<input type="text" placeholder="cat photo URL" class="form-control" required>

所有文本输入类的元素如 input，textarea和 select只要设置 .form-control class 就会占满100%的宽度。

创建 Bootstrap Wells

Bootstrap 有一个叫作 well 的 class，作用是使界面更具层次感。

<div class="row">
    <div class="col-xs-6">
      	<div class="well"></div>
    </div>
    <div class="col-xs-6">
		<div class="well"></div>
    </div>
</div>

在这里插入图片描述

二、jQuery

1 简介

jQuery 是开发者们最常用的 JavaScript 库之一。

在 jQuery 于 2006 年发布时，各种常用浏览器处理 JavaScript 的方式都略有不同。jQuery 简化了编写客户端 JavaScript 的过程，并确保代码在所有浏览器中以同样的方式运行。

2 笔记

document.ready

<script>
  $(document).ready(function() {

  });
</script>

在浏览器加载页面后，放入此 function 的代码将立即运行。有一点很重要，如果没有 document ready function，代码将在 HTML 页面呈现之前运行，这可能会导致错误。

使用 jQuery 选择器选择元素

使用 jQuery 将 Animate.css bounce class 应用于 button 元素，给 button 元素添加跳跃效果：

$(document).ready(function() {
    $("button").addClass("animated bounce");
  });

使用 jQuery class 选择器选择元素

为类为well的元素添加抖动：

$(".well").addClass("animated shake");

和 CSS 声明一样，在类名前需要添加 .

使用 jQuery id 选择器选择元素

$("#target3").addClass("animated fadeOut");

使用 jQuery 从元素中移除 class

$("button").removeClass("btn-default");

把所有 button 元素的 btn-default class 移除。

使用 jQuery 更改元素的 CSS

$("#target1").css("color", "blue");

把颜色变蓝。注意 CSS 属性和它的值在英文引号里，并且它们用逗号而不是冒号间隔开。

使用 jQuery 禁用元素

$("#target1").prop("disabled",true);

禁用 target1 按钮。

使用 jQuery 更改元素内部的文本

$("#target4").html("<i>#target4</i>");

.html()函数提供的内容将完全替换按钮#target4里的内容。i 标签虽然传统上用来强调文本，但此后常用作图标的标签。 em 标签作为强调标签现在已被广泛接受。

使用jQuery删除元素

$('#target4').remove();

使用 jQuery 的 appendTo 方法移动元素

$('#target2').appendTo('#right-well')

把 target2 元素从 left-well 移动到 right-well。

使用 jQuery的clone方法克隆元素

$("#target5").clone().appendTo('#left-well');

克隆 target5 元素，并将其附加到 left-well 。

使用 jQuery 选择元素的父元素

$("#target1").parent().css("background-color","red");

把 #target1 元素的父元素背景色设置成红色。

使用 jQuery 选择元素的子元素

$("#right-well").children().css('color','orange');

将 right-well 元素的所有子元素设置为橙色。

使用 jQuery 选择元素的特定子元素

$(".target:nth-child(2)").addClass("animated bounce");

使用 jQuery 选择偶数元素

$(".target:even").addClass("animated shake")

选取所有类为target的偶数元素。

使用 jQuery 修改整个页面

$('body').addClass("animated hinge");

选取body标签。

body-hinge

三、Sass

1 简介

Sass，英文全称为 “Syntactically Awesome StyleSheets”，是对 CSS 的扩展。它添加了一些基础 CSS 中不具有的新特性。Sass 简化了 CSS，这让维护项目中的样式表变得更容易。

2 笔记

用 Sass 变量存储数据

在 Sass 中，变量以 $ 开头的，后跟变量名。

<style type='text/scss'>
  $text-color: red;

  .header{
    text-align: center;
  }
  .blog-post, h2 {
    color: $text-color;
  }
</style>

用 Sass 嵌套CSS

在 CSS 里，每个元素的样式都需要写在独立的代码块中：

article {
  height: 200px;
}

article p {
  color: white;
}

article ul {
  color: blue;
}

Sass 允许 CSS 规则的嵌套，即在对应的父元素中写子元素的样式，这样可以简化代码。

article {
  height: 200px;

  p {
    color: white;
  }

  ul {
    color: blue;
  }
}

用 Mixins 创建可重用 CSS

CSS 的新功能需要一段时间适配后，所有浏览器后才能完全使用。随着浏览器的不断升级，使用这些 CSS 规则时可能需要添加浏览器前缀。

在 Sass 中，mixin 是一组 CSS 声明，可以在整个样式表中重复使用。定义以 @mixin 开头，后跟自定义名称。参数是可选的。

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}

在需要 box-shadow 规则的地方，只需一行 mixin 调用而无需添加所有的浏览器前缀。 mixin 可以通过 @include 指令调用。

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

使用 @if 和 @else 为样式添加逻辑

@mixin border-stroke($val){
    @if $val == light{
      border: 1px solid black;
    }
    @else if $val == medium{
      border: 3px solid black;
    }
    @else if $val == heavy{
      border: 6px solid black;
    }
    @else{
      border: none;
    }
  }

调用：

div {
    @include border-stroke(medium);
  }

使用 @for 创建一个 Sass 循环

@for 以两种方式使用：“开始 through 结束” 或 “开始 to 结束”。主要区别在于“开始 to 结束”不包括结束数字，而“开始 through 结束”包括结束数字。

<style type='text/scss'>
  @for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}
</style>

#{$i} 部分是将变量（i）与文本组合成字符串的语法。当 Sass 文件转换为 CSS 时，它看起来像这样：

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

...

.col-12 {
  width: 100%;
}

这是创建网格布局的有效方法。现在，有了 12 个可用作 CSS class 的列宽选项。

使用 @each 遍历列表中的项目

遍历列表：

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

遍历映射：需要用 $key 变量来引用 map 中的键。

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

以上两个代码示例都转换为以下 CSS：

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

使用 @while 循环创建样式

@for 挑战提供了一个创建简单网格系统的示例。用 @while 也可以实现。

$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}

用 Partials 将样式分成小块

Sass 中的 Partials 是包含 CSS 代码段的单独的文件。这些片段可以导入其它 Sass 文件使用。

<!-- main.scss 文件 -->
@import 'variables'

将名为 _variables.scss 的 partial 导入 main.scss 文件。partials 的名称以下划线（_）字符开头，这样 Sass 就知道它是 CSS 的一小部分，而不会将其转换为 CSS 文件。 import 语句中不需要下划线——Sass 知道它是 partial。将 partial 导入文件后，可以使用所有变量、mixins 和其它代码。

将一组 CSS 样式扩展到另一个元素

.info{
    width: 200px;
    border: 1px solid black;
    margin: 0 auto;
  }
  .info-important{
    @extend .info;
    background-color:magenta;
  }

除了新样式之外，.info-important 将具有与.info 相同的属性。
在这里插入图片描述

Love__Tay

关注

9
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫