[成都|内门弟子]JS-韦骁|2022年09月27日的日报-技能树.IT修真院

发表于： 2022-09-27 19:42:34

0 455

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

这将在 Bootstrap CSS 部分详细讲解。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

这将在 Bootstrap 插件部分详细讲解。

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

容器

容器有两种：流体容器（container-fluid）和固体容器（container）

两种容器之间不能相互嵌套。

固体容器固定宽度并且支持响应式，有三个阈值，在不同尺寸视窗下显示不同的固定宽度。

栅格系统

栅格系统通过行(row)与列(column)来进行页面的布局。

行必须包含在容器中.

行在水平方向创建一组列，每一行将页面宽等均的分为12列。

页面内容要放在列中，并且只有列可以作为行的直接子元素。

为列设置 padding 属性，可以为列与列之间设置间距，为 row 设置负值 margin ，抵消为容器设置的 padding 间接为行抵消了 padding 。

如果一行中包含的列大于12，多余的列会另起一行。

在没有给大屏幕设置栅格类的情况下，小屏幕的栅格类可以在大屏幕下起作用。

栅格系统对不同尺寸屏幕有不用的前缀

槽宽：每列与内容之间的间隙，30px ，平均到两边，每边15px 。

从小到大是兼容的，但是大分辨率在小分辨率下是会从水平排列变垂直排列

列偏移： .col-xx-offset-x ，列会向右偏移设定的多少列。

列排序：.col-md-push-* 和 .col-md-pull-*类可以很容易的改变列的顺序。

排版

除了标题标签<h1><h6>之外，还提供了.h1 到.h6 类，可以给内联元素提供标题样式。

标题内包含 <small> 标签或添加 .small 类的元素。可以添加副标题。

.lead 类突出显示段落。

<head> 标签，高亮内联文本。

<del>被删除的文本。

<s>无用文本。类似于删除文本。

<ins> 插入文本，文本底部添加下划线。

<u>带下划线文本。

<strong>强调一段文本，font-weight。

<i>斜体，主要用于发言技术词汇，<b> 高亮单词或短语。

文本对齐通过 .text-* ,left、center 、right 、 justify 、nowrap 。

改变大小写，.text-lowercase , .text-uppercase , .text-capitalize（每个单词头大写）。

缩略语：<abbr title="attribute">attr<abbr>. 页面显示标签内的内容，鼠标移到attr 上会显示title的内容。

为缩略语添加 .initialism 类，可以让 font-size 变小。

地址： <address></address>标签。

文档引用内容用<blockquote></blockquote> 标签。直接引用建议用 <p> 标签包住。

多样式引用：引用来源添加<footer> 标签，来源名称包裹进<cite> 标签。

引用内容默认左对齐，为 <blockquote>添加 .blockquote-reverse类可以右对齐。

列表

无序列表和有序列表，添加.list-unstyled 列表无样式，作用在直接子元素上。

内联列表通过类.list-inline，将所有元素放置在同一行。

<dl></dl> ,<dt> </dt> ,<dd></dd>,

为<dt> 添加类 .dl-horizontal 可以让 <dt> 内的短语及其描述在一行。

代码

内联代码： <code> 标签包裹内联样式的代码片段。

用户输入：通过 <kbd> 标签标记用户通过键盘输入的内容。

代码块：多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。

还可以使用 .pre-scrollable 类，作用是为代码块添加高度，自动添加滚动条。

变量：通过 <var> 标签标记变量。

程序输出：通过 <samp> 标签来标记程序输出的内容。

表格

为任意 <table> 标签添加 .table类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

条纹状表格：添加类 .table-striped 可以给表格添加斑马条纹样式。

带边框表格：添加 .table-bordered 类为表格和其中的每个单元格增加边框。

鼠标悬停：通过添加 .table-hover 类可以让<tbody> 中的每一行对鼠标悬停状态作出响应。

紧凑表格：通过添加 .table-condensed 类可以让表格更加紧凑，减小padding。

响应式表格：将任何.table元素包裹在.table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。

表单

所有设置了 .form-control类的<input> 、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。

将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

内联表单：为 <form> 元素添加 .form-inline 类可使其内容左对齐，表单元素在一行排列。只适用于视口（viewport）至少在 768px 宽度时

（视口宽度再小的话就会使表单折叠）。

一定要添加 label 标签

水平排列表单：为表单添加 .form-horizontal 类，可以将 label 标签和控件组水平并排布局。

输入框：括大部分表单控件、文本输入域控件，还支持所有 HTML5。

类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

（只有正确设置了type、属性的输入控件才能被赋予正确的样式）

文本域：<textarea class="form-control" rows="3"></textarea> 可以通过改变 row 属性值改变文本域大小。

多选框和单选框：默认堆叠排列。通过将 .checkbox-inline或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，

可以使这些控件排列在一行。

下拉列表：为 <select>添加类 .form-control ，可以显示Bootstrap设置的默认样式。对于标记了 multiple属性的 <select>控件来说，默认显示多选项。

静态控件：如果需要在表单中将一行纯文本和 label 元素放置于同一行，为<p> 元素添加 .form-control-static 类。

状态检验：状态包括 error ,warning , success 状态。Bootstrap为这些状态都定义了默认样式。

使用时，.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。

任何包含在此元素之内的 .control-label、.form-control 和.help-block元素都将接受这些校验状态的样式.

添加额外的图标: 设置相应的.has-feedback 类并添加正确的图标.

控件尺寸：通过 .input-lg 类似的类可以为控件设置高度，通过.col-lg-* 类似的类可以为控件设置宽度。

通过添加 .form-group-lg 或 .form-group-sm类，为.form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

按钮

可作为按钮的标签或元素：为<a>、<button>或 <input>元素添加 .button 就可以作为按钮显示。

注意： <a> 元素作为按钮使用时，务必设置 role = “button” 属性。

预定义样式： .btn-default , .btn-primary, .btn-success , .btn-info, .btn-warning , .btn-danger , .btn-link 。

按钮尺寸：使用 .btn-lg、.btn-sm或 .btn-xs就可以获得不同尺寸的按钮。

给按钮添加 .btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

激活状态：通过 .active 类实现。

禁用状态：为<button>元素添加 disabled 属性，使其表现出禁用状态。为基于 <a>元素创建的按钮添加 .disabled 类。

图片

响应式图片：通过为图片添加 .img-responsive 类可以让图片支持响应式布局。使用 .center-block 类，让使用了 .img-responsive 类的图片水平居中。

图片形状：通过为<img>元素添加以下相应的类，可以让图片呈现不同的形状。

class=”img-rounded” ， class=”img-circle” ， class=”img-thumbnail”

css代码：


* {
    margin: 0;
    padding: 0;
}

.box {
    height: 100vh;
    background-color: #fafafa;
    margin: 0 auto;
}

ul {
    list-style-type: none;
    width: 200px;
    background-color: #29b078;
    float: right;
    margin-right: 20%;
}

li {
    width: auto;
    display: inline-block;
    margin-top: 40%;
    margin-right: 3%;

}

.about {
    font-size: 16px;
    color: #ffffff;
}

.head {
    height: 39px;
    width: auto;
}

.head p {
    font-size: 14px;
    color: #29b078;
    margin: 1% 0 0 15%;
}

.chart {
    width: auto;
    margin-right: 15%;
}

.icon {
    float: right;
    margin-top: -1%;
    margin-left: 1%;
}

.navigation {
    background-color: #29b078;
    height: 100px;
}

.content {
    width: 100%;
    height: 100%;
    position: relative;

}

.image {
    margin-top: -12px;
    width: 1920px;
    height: 600px;
    max-height: 100%;
    max-width: 100%;
}

.word1 {
    font-size: 40px;
    color: #ffffff;
    position: absolute;
    top: 14%;
    left: 25%;
}

.word2 {
    font-size: 100px;
    color: #ffffff;
    position: absolute;
    top: 18%;
    left: 12%;
}

.word3 {
    font-size: 60px;
    color: #ffffff;
    position: absolute;
    top: 22%;
    left: 32%;
}

.ellipse1 {
    position: absolute;
    top: 54%;
    left: 45%;

}

.ellipse2{
    position: absolute;
    top: 54%;
    left: 47%;

}

.ellipse3 {
    position: absolute;
    top: 54%;
    left: 49%;

}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=720,initial-scale=1">
    <link rel="stylesheet" href="homepage.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="box">
    <div class="head">
        <p>客服热线:010-594-78634</p>
        <div class="chart">
            <img class="icon" src="tupian/图层%201.png">
            <img class="icon" src="tupian/图层%202.png">
            <img class="icon" src="tupian/图层%203.png">
        </div>
    </div>
    <div class="navigation">
        <ul>
            <li class="about">首页</li>
            <li class="about">职业</li>
            <li class="about">推荐</li>
            <li class="about">关于</li>
        </ul>
    </div>
    <div class="content">
        <img class="image" src="tupian/Image.png">
        <p class="word1">作为你一个初级菜鸟，你是否想要了解</p>
        <p class="word2">50万</p>
        <p class="word3">年薪的程序员，都会那些技能呢？</p>
        <img class="ellipse1" src="tupian/椭圆%207%20拷贝.png">
        <img class="ellipse2" src="tupian/椭圆%207%20拷贝.png">
        <img class="ellipse3" src="tupian/椭圆%207%20拷贝.png">
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>