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

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、下拉菜单、

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

    .dropdown {  position: relative;  display: inline-block;}.dropdown-content {  display: none;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  padding: 12px 16px;}//下拉内容对齐方式.dropdown-content {    right: 0;}.dropdown:hover .dropdown-content {  display: block;}[mycode3][mycode3 type="html"]<div class="dropdown">  鼠标移动到我这!  <div class="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

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

    • 向所有的文本元素 、