前端开发库 - BootStrap JQuery Sass

最新推荐文章于 2023-03-18 22:19:32 发布

TardisKey

最新推荐文章于 2023-03-18 22:19:32 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： bootstrap javascript html

本文链接：https://blog.csdn.net/TardisKey/article/details/120216424

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在前端开发中使用Bootstrap，包括引入、图片自适应、按钮创建及其不同主题，还讲解了JQuery的document.ready和选择器选择元素，以及Sass的变量、嵌套、Mixins、逻辑判断等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap

引入 Bootstrap

添加如下代码到 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"/>

使图片自适应移动端

为 image 标签上设置 class 属性为 img-responsive

用 Bootstrap 居中文本

将class 属性设置为 text-center 就可以实现
<h2 class="red-text text-center">your text</h2>

创建一个 Bootstrap 按钮

Bootstrap 的 button 元素有着独有的、比默认 HTML 按钮更好的样式风格
一般情况下，btn 和 btn-default 两个 classes 修饰的 button 元素宽度与它包含的文本相同

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

创建一个 Bootstrap 块级元素按钮

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

<button class="btn btn-default btn-block">Submit</button>
这个按钮会 100% 占满所有的可用宽度

Bootstrap 按钮的不同主题

btn-primary class 的颜色是应用的主要颜色。（深蓝色）
btn-info class 通常用在备选操作上（浅蓝色）
btn-danger class 用来提醒用户此行为具有破坏性（红色）

添加图标

<i class="fas fa-info-circle"></i>

Bootstrap 栅格系统

<div class="row">
	<div class="col-xs-6"></div>
	<div class="col-xs-6">
		<div class="well "></div>
		# Well 是一种会引起内容凹陷显示或插图效果的容器 
		<div>
	</div>
</div>
栅格系统会把一个百分百的屏幕分成12份，如果是
cosl-xs-6 就是在小屏幕的时候占屏幕的6格 刚好就说手机屏幕的一半
col-md-3 就是当这个内容在电脑上显示，就占3格，刚好是电脑屏幕的1/4。

JQuery

script document.ready

<script >
  $(document).ready(function() {
    
  });
浏览器加载页面，function 中放入的代码就会运行。
如果没有 document ready function，代码将在 HTML 页面呈现之前运行，这可能会导致错误。

使用 jQuery 选择器选择元素

给 button 元素添加跳跃效果
在 document ready 函数内添加如下代码：
$("button").addClass("animated bounce");
.addClass() 方法用来给标签添加类

用 $("#target3") 选择器选取 id 为 target3 的 button 标签
标签选择器： $("button")，类选择器：$(".btn") ,id 选择器：$("#target1")

使用 jQuery 从元素中移除 class
$("#target2").removeClass("btn-default");
使用 jQuery 更改元素的 CSS
把颜色变蓝：
$("#target1").css("color", "blue");

禁用所有的按钮：
$("button").prop("disabled", true);

使用 jQuery 更改元素内部的文本通过
$("h3").html("<em>jQuery Playground</em>");

使用 jQuery 删除元素 从页面移除 HTML 标签
$("#target1").remove()

使用 jQuery 的 appendTo 方法移动元素
 appendTo() 方法，可以选取 HTML 标签并将其添加到另一个标签里面
 $("#target4").appendTo("#left-well");

使用 jQuery 克隆元素
clone() 方法，可以复制标签  把元素从一个地方复制到另一地方
$("#target2").clone().appendTo("#right-well");

使用 jQuery 选择元素的父元素
使用 parent() 方法把 left-well 标签的父标签背景色设置成蓝色（blue）：
$("#left-well").parent().css("background-color", "blue")

使用 jQuery 选择元素的子元素
用 children() 方法把 left-well 标签的子标签的颜色设置成 blue（蓝色）：
$("#left-well").children().css("color", "blue")
使用 jQuery 选择元素的特定子元素
给每个区域（well）的第 3 个标签设置弹跳（bounce）动画效果：
$(".target:nth-child(3)").addClass("animated bounce");

使用 jQuery 选择奇偶数元素
奇 :odd 和偶 :even 
$(".target:odd").addClass("animated shake");

SASS

用 Sass 变量存储数据

变量以 $ 开头的
$main-fonts: Arial, sans-serif;
$headings-color: green;
并使用变量：

h1 {
  font-family: $main-fonts;
  color: $headings-color;
}

用 Sass 嵌套 CSS

嵌套功能（即在对应的父元素中写子元素的样式）可以有效地简化代码
nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

用 Mixins 创建可重用 CSS

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}```
@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 为样式添加逻辑

Sass 中的 @if 指令对于测试特定情况非常有用——它的工作方式与 JavaScript 中的 if 语句类似。

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

使用 @for 创建一个 Sass 循环

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

这是一个开始 through 结束的示例：
@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}
.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}
...
.col-12 {
  width: 100%;
}

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

@each 指令，循环遍历列表或映射中的每个项目。 在每次迭代时，变量将从列表或映射分配给当前值
@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}
.blue-text {
  color: blue;
}
.red-text {
  color: red;
}
.green-text {
  color: green;
}

使用 @while 循环创建样式

$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}
首先，定义变量 $x 并将其设置为 1。 接下来，使用 @while 指令，while $x 小于 13 时创建网格系统 。 在设置 width 的 CSS 规则后，$x 增加 1 以避免无限循环。

用 Partials 将样式分成小块

Sass 中的 Partials 是包含 CSS 代码段的单独的文件。
这些片段可以导入其它 Sass 文件使用。
可以把类似代码放到模块中，以保持代码结构规整且易于管理。

partials 的名称以下划线（_）字符开头，这样 Sass 就知道它是 CSS 的一小部分，而不会将其转换为 CSS 文件。
此外，Sass 文件以 .scss 文件扩展名结尾。要将 partial 中的代码放入另一个 Sass 文件中，使用 @import 指令。

例如，如果所有 mixins 都保存在名为 “_mixins.scss” 的 partial 中，并且在 “main.scss” 文件中需要它们，下面是使用方法：

@import 'mixins'

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

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}
现在需要另一个名为 .big-panel 的面板。 
它具有与 .panel 相同的基本属性，但还需要 width 和 font-size。 
可以从 .panel 复制并粘贴初始 CSS 规则，但是当添加更多类型的面板时，代码会变得重复。 
extend 指令是一种重用为一个元素编写的规则的简单方法，可以为另一个元素重用并添加更多规则：

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}