第四周总结（css，bootstrap）

2024-03-08 10:08:22

第四周总结（前端）

  1. css边框
    a.css圆角边框
    border-radius 属性被用于创建圆角
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 2px solid #a1a1a1;
            padding: 10px 40px;
            background: #dddddd;
            width: 300px;
            border-radius: 25px;
        }
    </style>
</head>

<body>
    <div>朱一龙</div>
</body>

</html>

b.css盒子阴影
box-shadow 属性被用来添加阴影

c.css边界图片
border-image 属性允许你指定一个图片作为边框

  1. css渐变
    可以让你在两个或多个指定的颜色之间显示平稳的过渡。
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
        }
    </style>
</head>

<body>
    <div>
        <h1>朱一龙</h1>
    </div>
</body>

</html>
  1. css2D转换
    a.translate（）方法
    translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-image: linear-gradient(to right, rgba(255, 0, 0), rgba(29, 231, 73));
        }
        
        .i {
            transform: translate(50px, 100px);
        }
    </style>
</head>

<body>
    <div>朱一龙</div>
    <div class="i">朱一龙</div>
</body>

</html>

其中translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

b.rotate（）方法
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-image: linear-gradient(to right, rgba(255, 0, 0), rgba(29, 231, 73));
        }
        
        .i {
            transform: rotate(30deg);
        }
    </style>
</head>

<body>
    <div>朱一龙</div>
    <div class="i">朱一龙</div>
</body>

</html>

其中rotate值（30deg）元素顺时针旋转30度。

c.scale（）方法
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: aquamarine;
            margin: 30px;
            border: 1px solid black;
        }
        
        .i {
            transform: scale(2, 3);
        }
    </style>
</head>

<body>
    <div>朱一龙</div>
    <div class="i">朱一龙</div>
</body>

</html>

其中scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

d.skew（）方法

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: chocolate;
            margin: 30px;
            border: 1px solid skyblue;
        }
        
        .i {
            transform: skew(30deg, 20deg);
        }
    </style>
</head>

<body>
    <div>朱一龙</div>
    <div class="i">朱一龙</div>
</body>

</html>
  1. css弹性盒子
    a. 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex-container {
            display: flex;
            height: 300px;
            width: 300px;
            background-color: chocolate;
            margin: 30px;
        }
        
        .flex-item {
            width: 50px;
            height: 50px;
            background-image: linear-gradient(to right, red, green);
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">朱一龙</div>
        <div class="flex-item">朱一龙</div>
        <div class="flex-item">朱一龙</div>
        <div class="flex-item">朱一龙</div>
    </div>
</body>

</html>

添加direction: rtl;弹性子盒子的排列方式也会改变

b.flex-direction
flex-direction 属性指定了弹性子元素在父容器中的位置。

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

c.justify-content
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content: flex-start | flex-end | center | space-between | space-around

c.align-items
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

d.flex-wrap
flex-wrap 属性用于指定弹性盒子的子元素换行方式。

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。

e.align-content
align-content 属性用于修改 flex-wrap 属性的行为，设置各个行的对齐

align-content: flex-start | flex-end | center | space-between | space-around | stretch

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

  1. bootstrap网格系统
    行必须放置在 .container class 内。
    网格系统是通过指定您想要横跨的十二个可用的列来创建的。
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

a.偏移列
为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

b.嵌套列
为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12。

c.列排序
改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

  1. bootstrap排版

a.内联子标题
如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本。

b.引导主体副本
为了给段落添加强调文本，则可以添加 class=“lead”，这将得到更大更粗、行高更高的文本。

c.缩写
。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。

.initialism可以显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母

d.地址
使用 <address> 标签，您可以在网页上显示联系信息。使用 <br> 标签来为封闭的地址文本添加换行。

e.引用
可以在任意的 HTML 文本旁使用默认的 <blockquote>
添加一个 <small> 标签来标识引用的来源，可以使用 class .pull-right 向右对齐引用。

  1. bootstrap列表组
    向元素<ul>添加class.list-group
    向元素<li>添加class.list-group-item

向列表组添加徽章（自动定位到右边）:
向<li>元素中添加<span class="badge">

向列表组添加链接：
用<a>代替<li>元素

  1. bootstrap多媒体对象
    在 <div> 元素上添加 .media 类来创建一个多媒体对象。

使用 .media-left 类让多媒体对象(图片)来实现左对齐，同样 .media-right 类实现了右对齐。

文本内容放在 class=“media-body” 的 div 中，图片左对齐则放在 class=“media-body” 之前，图片右对齐则放在 class=“media-body” 之后。

此外，你还可以使用 .media-heading 类来设置标题。

  1. bootstrap面板
    a.面板标题
    使用 .panel-heading class 可以很简单地向面板添加标题容器。
    使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

b.面板脚注
可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可

c.带语境色彩的面板
使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板

d.带表格的面板
为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>，则组件会无中断地从面板头部移动到表格。

e.带列表组的面板
通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板，并在面板中添加列表组

上一篇：基于BootStrap+JSP的学生管理系统（毕业设计项目）


下一篇：bootstrap-2-栅格简单实例