CSS、Bootstrap 入门级教程/知识总结/速成/进阶版/全面详细【含代码】

CSS与bootstrap(个人笔记、持续更新中)

目录(快速查询)

  • CSS 3.0

    • 1、display、

    • 2、flex、

    • 3、导航栏、

    • 4、下拉菜单、

    • 5、表单、

    • 6、布局

    • 7、媒体查询与多媒体查询

      • 7.2多媒体查询
    • 8、网格系统、

      • 8.2响应式网格视图
    • 9、css属性

  • Bootstrap3.0(基于jQuery)

    • 1、表单

    • 2、按钮、

    • 10、网格系统

      • 10.1
      • 10.2偏移列
      • 10.3嵌套列
      • 10.4列排序
    • 3、输入框组、

    • 4、导航栏、

    • 5、下拉菜单、

    • 6、滚动监听、

    • 7、提示工具、

    • 8、折叠、

    • 9、轮播

    • 10、UI编辑器

CSS 3.0

1、display、

display 属性规定元素应该生成的框的类型。

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。

默认值: inline
继承性: no
版本: CSS1
JavaScript 语法: object.style.display=“inline”
描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。)。)。)。)。)。)
table-row-group 此元素会作为一个或多个行的分组来显示(类似
table-header-group 此元素会作为一个或多个行的分组来显示(类似
table-footer-group 此元素会作为一个或多个行的分组来显示(类似
table-row 此元素会作为一个表格行显示(类似
table-column-group 此元素会作为一个或多个列的分组来显示(类似
table-column 此元素会作为一个单元格列显示(类似
table-cell 此元素会作为一个表格单元格显示(类似
table-caption 此元素会作为一个表格标题显示(类似
inherit 规定应该从父元素继承 display 属性的值。

2、flex、

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

描述
flex-grow 数字,规定项目相对于其余弹性项目的增长量。
flex-shrink 数字,规定项目相对于其余弹性项目的收缩量。
flex-basis 项目的长度。
合法值:“auto”、“inherit”,或单位为 “%”, “px”, “em” 的值,或任何其他长度单位。
auto 等同于 1 1 auto。
initial 等同于 0 1 auto。参阅 initial。
none 等同于 0 0 auto。
inherit 从其父元素继承该属性。参阅 inherit。
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

/* 响应式布局 - 制作单列布局(100%)而不是两列布局(50%) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

3、导航栏、

作为标准的HTML基础一个导航栏是必须的

在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表,所以使用

  • 元素非常有意义:

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: #f1f1f1;
    }
     
    li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }
     
    /* 鼠标移动到选项上修改背景颜色 */
    li a:hover {
        background-color: #555;
        color: white;
    }
    
    //激活
    li a.active {
        background-color: #4CAF50;
        color: white;
    }
    
    //创建一个左边是全屏高度的固定导航条
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 25%;
        background-color: #f1f1f1;
        height: 100%; /* 全屏高度 */
        position: fixed; 
        overflow: auto; /* 如果导航栏选项多,允许滚动 */
    }
    
    //水平导航条
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
     
    li {
        float: left;
    }
     
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
     
    /*鼠标移动到选项上修改背景颜色 */
    li a:hover {
        background-color: #111;
    }
    
    
    

    4、下拉菜单、

    当鼠标移动到制定元素上时会出现下拉菜单

    
    [mycode3]
    [mycode3 type="html"]
    
    "dropdown"> 鼠标移动到我这!
    "dropdown-content">

    菜鸟教程

    www.runoob.com

    5、表单、

    input[type=text], select 选择器

    //使用css来渲染html的表单元素
    input[type=text], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
     
    input[type=submit] {
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
     
    input[type=submit]:hover {
      background-color: #45a049;
    }
     
    div {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
    }
    //响应式表单
    * {
      box-sizing: border-box;
    }
     //select 下拉菜单  textarea文本框样式
    input[type=text], select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }
     
    label {
      padding: 12px 12px 12px 0;
      display: inline-block;
    }
     
    input[type=submit] {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: right;
    }
     
    input[type=submit]:hover {
      background-color: #45a049;
    }
     
    .container {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
    }
     
    .col-25 {
      float: left;
      width: 25%;
      margin-top: 6px;
    }
     
    .col-75 {
      float: left;
      width: 75%;
      margin-top: 6px;
    }
     
    /* 清除浮动 */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
     
    /* 响应式布局 layout - 在屏幕宽度小于 600px 时, 设置为上下堆叠元素 */
    @media screen and (max-width: 600px) {
      .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
      }
    }
    
    

    6、布局

    网页布局有很多种方式,一般分为以下几个部分:头部区域header、菜单导航区域menu、内容区域content、底部区域footer

    * 创建三个相等的列 */
    .column {
      float: left;
      width: 33.33%;
    }
     
    /* 列后清除浮动 */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
     
    /* 响应式布局 - 小于 600 px 时改为上下布局 */
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
      }
    }
    //创建不相等的三个列
    .column {
      float: left;
    }
     
    /* 左右侧栏的宽度 */
    .column.side {
      width: 25%;
    }
     
    /* 中间列宽度 */
    .column.middle {
      width: 50%;
    }
     
    /* 响应式布局 - 宽度小于600px时设置上下布局 */
    @media screen and (max-width: 600px) {
      .column.side, .column.middle {
        width: 100%;
      }
    }
    
    //响应式布局
    * {
      box-sizing: border-box;
    }
     
    body {
      font-family: Arial;
      padding: 10px;
      background: #f1f1f1;
    }
     
    /* 头部标题 */
    .header {
      padding: 30px;
      text-align: center;
      background: white;
    }
     
    .header h1 {
      font-size: 50px;
    }
     
    /* 导航条 */
    .topnav {
      overflow: hidden;
      background-color: #333;
    }
     
    /* 导航条链接 */
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
     
    /* 链接颜色修改 */
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
     
    /* 创建两列 */
    /* Left column */
    .leftcolumn {   
      float: left;
      width: 75%;
    }
     
    /* 右侧栏 */
    .rightcolumn {
      float: left;
      width: 25%;
      background-color: #f1f1f1;
      padding-left: 20px;
    }
     
    /* 图像部分 */
    .fakeimg {
      background-color: #aaa;
      width: 100%;
      padding: 20px;
    }
     
    /* 文章卡片效果 */
    .card {
      background-color: white;
      padding: 20px;
      margin-top: 20px;
    }
     
    /* 列后面清除浮动 */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
     
    /* 底部 */
    .footer {
      padding: 20px;
      text-align: center;
      background: #ddd;
      margin-top: 20px;
    }
     
    /* 响应式布局 - 屏幕尺寸小于 800px 时,两列布局改为上下布局 */
    @media screen and (max-width: 800px) {
      .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
      }
    }
     
    /* 响应式布局 -屏幕尺寸小于 400px 时,导航等布局改为上下布局 */
    @media screen and (max-width: 400px) {
      .topnav a {
        float: none;
        width: 100%;
      }
    }
    
    

    7、媒体查询与多媒体查询

    //@media 规则允许在相同样式表为不同媒体设置不同的样式。
    @media screen
    {
        p.test {font-family:verdana,sans-serif;font-size:14px;}
    }
    @media print
    {
        p.test {font-family:times,serif;font-size:10px;}
    }
    @media screen,print
    {
        p.test {font-weight:bold;}
    }
    
    媒体类型 描述
    all 用于所有的媒体设备。
    aural 用于语音和音频合成器。
    braille 用于盲人用点字法触觉回馈设备。
    embossed 用于分页的盲人用点字法打印机。
    handheld 用于小的手持的设备。
    print 用于打印机。
    projection 用于方案展示,比如幻灯片。
    screen 用于电脑显示器。
    tty 用于使用固定密度字母栅格的媒体,比如电传打字机和终端。
    tv 用于电视机类型的设备。

    7.2多媒体查询

    媒体查询可用于检测很多事情,例如:

    • viewport(视窗) 的宽度与高度

    • 设备的宽度与高度

    • 朝向 (智能手机横屏,竖屏) 。

    • 分辨率

    目前很多针对苹果手机,Android 手机,平板等设备都会使用到多媒体查询。

    @media not|only mediatype and (expressions) {
        CSS 代码...;
    }
    
    all 用于所有多媒体类型设备
    print 用于打印机
    screen 用于电脑屏幕,平板,智能手机等。
    speech 用于屏幕阅读器
    //在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏
    @media screen and (max-width: 600px) {
      div.example {
        display: none;
      }
    }
    //在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧
    @media screen and (min-width: 480px) {
        #leftsidebar {width: 200px; float: left;}
        #main {margin-left:216px;}
    }
    
    
    
    //实例 当最大宽度为。。px时 干什么
    @media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
        ul li a {
            padding-left: 30px;
            background: url(email-icon.png) left center no-repeat;
        }
    }
    
    @media screen and (max-width: 1000px) and (min-width: 700px) {
        ul li a:before {
            content: "Email: ";
            font-style: italic;
            color: #666666;
        }
    }
    
    @media screen and (min-width: 1001px) {
        ul li a:after {
            content: " (" attr(data-email) ")";
            font-size: 12px;
            font-style: italic;
            color: #666666;
        }
    }
    

    8、网格系统、

    网格是一组相交的水平线和垂直线,它定义了网格的列和行。

    CSS 提供了一个基于网格的布局系统,带有行和列,可以让我们更轻松地设计网页,而无需使用浮动和定位

    以下是一个简单的网页布局,使用了网格布局,包含六列和三行

    属性 描述
    column-gap 指定列之间的间隙
    gap row-gapcolumn-gap 的简写属性
    grid grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
    grid-area 指定网格元素的名称,或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
    grid-auto-columns 指的默认的列尺寸
    grid-auto-flow 指定自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列。
    grid-auto-rows 指的默认的行尺寸
    grid-column grid-column-startgrid-column-end 的简写属性
    grid-column-end 指定网格元素列的结束位置
    grid-column-gap 指定网格元素的间距大小
    grid-column-start 指定网格元素列的开始位置
    grid-gap grid-row-gapgrid-column-gap 的简写属性
    grid-row grid-row-startgrid-row-end 的简写属性
    grid-row-end 指定网格元素行的结束位置
    grid-row-gap 指定网格元素的行间距
    grid-row-start 指定网格元素行的开始位置
    grid-template grid-template-rows, grid-template-columnsgrid-areas 的简写属性
    grid-template-areas 指定如何显示行和列,使用命名的网格元素
    grid-template-columns 指定列的大小,以及网格布局中设置列的数量
    grid-template-rows 指定网格布局中行的大小
    row-gap 指定两个行之间的间距
    //当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后,它就变成了一个网格容器,这个元素的所有直系子元素将成为网格元素。
    //创建row列
    .grid-container {
      display: grid;
      grid-template-rows: 100px 300px;
    }
    //创建行
    .grid-container {
      display: grid;
      grid-template-columns: 100px 300px;
    }
    //间距
    .grid-container {
      display: grid;
      grid-gap: 50px;
    }
    我们设置一个网格元素的网格线从第一列开始,第三列结束:
    .item1 {
      grid-column-start: 1;
      grid-column-end: 3;
    }
    //布局四列且同距
      display: grid;
      grid-template-columns: auto auto auto auto;
    }
    //justify-content 属性用于对齐容器内的网格,设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
    
    align-content 属性
    align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式
    
    

    网格容器包含了一个或多个网格元素。

    默认情况下,网格容器的每一列和每一行都有一个网格元素,我们也可以设置网格元素跨越多个列或行,行和列为行号。

    grid-column 属性定义了网格元素列的开始和结束位置。

    注意: grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。

    我们可以参考行号来设置网格元素,也可以使用关键字 “span” 来定义元素将跨越的列数。

    以下实例设置 “item1” 在第 1 列开始,在第 5 列前结束:

    .item1 {
      grid-column: 1 / 5;
    }
    //设置item1跨越两行
    .item1 {
      grid-row: 1 / span 2;
    }
    //
    .item8 {
      grid-area: 1 / 2 / 5 / 6;
    }
    
    
    grid-area 属性
    grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。
    
    以下实例设置 "item8" 从第 1 行开始和第 2 列开始, 第 5 行和第 6 列结束。
    
    实例
    .item8 {
      grid-area: 1 / 2 / 5 / 6;
    }
    
    以下实例设置 "item8" 从第 2 行开始和第 1 列开始, 横跨 2 行 3 列。
    .item8 {
      grid-area: 2 / 1 / span 2 / span 3;
    }
    
    grid-area 属性可以对网格元素进行命名。
    
    命名的网格元素可以通过容器的 grid-template-areas 属性来引用。
    
    以下实例 item1 命名为 "myArea", 并跨越五列:
    .item1 {
      grid-area: myArea;
    }
    .grid-container {
      grid-template-areas: 'myArea myArea myArea myArea myArea';
    }
    
    
    每行由单引号内 ' ' 定义,以空格分隔。
    . 号表示没有名称的网格项。
    
    .item1 {
      grid-area: myArea;
    }
    .grid-container {
      grid-template-areas: 'myArea myArea . . .';
    }
    
    
    要定义两行,请在另一组单引号内 ' ' 定义第二行的列。
    
    以下实例设置 "item1" 跨越 2 行 2 列:
    
    实例
    .item1 {
      grid-area: myArea;
    }
    .grid-container {
      grid-template-areas: 'myArea myArea . . .';
    }
    
    命名所有网格元素,并制作一个网页模板:
    
    实例
    .item1 { grid-area: header; }
    .item2 { grid-area: menu; }
    .item3 { grid-area: main; }
    .item4 { grid-area: right; }
    .item5 { grid-area: footer; }
     
    .grid-container {
      grid-template-areas:
        'header header header header header header'
        'menu main main main right right'
        'menu footer footer footer footer footer';
    }
    
    
    网格元素的顺序
    网格布局允许我们将网格元素放置在我们喜欢的任何地方。
    
    HTML 代码中的第一元素不一定非要显示为网格中元素的第一项。
    
    实例
    .item1 { grid-area: 1 / 3 / 2 / 4; }
    .item2 { grid-area: 2 / 3 / 3 / 4; }
    .item3 { grid-area: 1 / 1 / 2 / 2; }
    .item4 { grid-area: 1 / 2 / 2 / 3; }
    .item5 { grid-area: 2 / 1 / 3 / 2; }
    .item6 { grid-area: 2 / 2 / 3 / 3; }
    
    
    您可以使用媒体查询,重新排列在指定屏幕尺寸下的顺序:
    
    实例
    @media only screen and (max-width: 500px) {
      .item1 { grid-area: 1 / span 3 / 2 / 4; }
      .item2 { grid-area: 3 / 3 / 4 / 4; }
      .item3 { grid-area: 2 / 1 / 3 / 2; }
      .item4 { grid-area: 2 / 2 / span 2 / 3; }
      .item5 { grid-area: 3 / 1 / 4 / 2; }
      .item6 { grid-area: 2 / 3 / 3 / 4; }
    }
    

    8.2响应式网格视图

    通常为12列,100%

    接下来我们来创建一个响应式网格视图。

    首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box

    确保边距和边框包含在元素的宽度和高度间。

    添加如下代码:

    { box-sizing: border-box; }
    
    12 列的网格系统可以更好的控制响应式网页。
    
    首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。
    
    在每列中指定 class, class="col-" 用于定义每列有几个 span :
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    
    [class*="col-"] {
        float: left;
        padding: 15px;
        border: 1px solid red;
    }
    //每一行使用 
    包裹。所有列数加起来应为 12:
    ...
    ...
    //列中行为左浮动,并添加清除浮动: .row:after { content: ""; clear: both; display: block; }

    9、css属性

    属性 说明 CSS
    appearance 定义元素的外观样式 3
    box-sizing 允许您为了适应区域以某种方式定义某些元素 3
    icon 为元素指定图标 3
    nav-down 指定用户按向下键时向下导航的位置 3
    nav-index 指定导航(tab)顺序。 3
    nav-left 指定用户按向左键时向左导航的位置 3
    nav-right 指定用户按向右键时向右导航的位置 3
    nav-up 指定用户按向上键时向上导航的位置a 3
    outline-offset 设置轮廓框架在 border 边缘外的偏移 3
    resize 定义元素是否可以改变大小

    (详细全面)如下:

    https://www.w3school.com.cn/cssref/index.asp

    Bootstrap3.0(基于jQuery)

    1、表单

    基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

    • 向父

      元素添加 role=“form”

    • 把标签和控件放在一个带有 class .form-group

      中。这是获取最佳间距所必需的。

    • 向所有的文本元素