五.弹性布局的class

设置元素的显示方式
d-*-none/block/inline/inline-block/flex/inline-flex...
*：sm/md/lg/xl
设置弹性的属性
d-*-flex/inline-flex 设置弹性容器
flex-*-row/column/row-reverse/column-reverse 响应式的主轴方向
flex-*-wrap/nowrap/wrap-reverse 响应式的换行设置
justify-content--between/around/start/center/end 响应式主轴方向对齐方式
align-items--start/center/end/baseline/stretch 响应式设置交叉轴对齐方式
弹性与栅格的关系
栅格 row 弹性，主轴x轴，可换行，左右-15px外边距
col-n flex:0 0 n% 左右+15px内边距
先写div.d-flex.flex-wrap
在在子div中写div.col-1，也可以完成栅格
即所有设置弹性，设置换行的，就可以完成栅格布局

六.表单

表单元素的排列方向
form-group 堆叠表单，垂直方向排列
form-inline 内联表单，水平方向排列(弹性，主轴x轴，可换行，交叉轴居中)，可以完美的替代栅格的row
表单元素的样式
文本框的样式 form-control：设置了：块级，w-100 字体属性，背景，边框，过渡

组件

网页中一些复杂的效果，之前必须用js，dom，jq来解决

一.常用组件

按钮组
btn-group 横向按钮组
btn-group-vertical 垂直按钮组
设置按钮组的大小
btn-group-lg 大按钮组
btn-group-sm 小按钮组
boot把js进行了封装，导致我们需要调用js的时候，使用自定义属性执行事件
boot调用事件，注意两件事
1. 调用事件的方式（靠自定义属性控制）
2. 事件影响的对象(自定义属性)

下拉菜单

样式结构
div.dropdown 相对定位
>btn.dropdown-toggle 添加一个向下的小三角
+ul.dropdown-menu display：none;

事件
button自定属性 data-toggle=“dropdown”
由于ul和button有共同的父级，不需要设置ul为目标

<h4>下拉菜单</h4>
<div class="dropdown"><button data-toggle="dropdown" class="btn btn-info dropdown-toggle">籍贯</button><ul class="dropdown-menu"><li><a href="#">北京</a></li><li><a href="#">上海</a></li><li><a href="#">广州</a></li><li><a href="#">深圳</a></li><li><a href="#">佳木斯</a></li></ul>
</div>

信息提示框
1. 结构
  div.alert 基本类
  .alert-danger/warning... 设置提示框颜色
  .alert-dismissible 让内部的小x改变字体颜色
  span.close 右浮动
2. 事件
  span data-dismiss="alert"
  自动把父元素div关闭
```
<h4>信息提示框</h4>
<div class="alert alert-danger alert-dismissible">你好，我是奋斗的程序胖！！<span data-dismiss="alert" class="close">×</span>
</div>
```

导航

水平导航
ul.nav 弹性，x轴，可换行，去点，去除左内边距
.nav-justified 作为.nav-item的祖先元素，让每一个li宽度相同，然后平分整个弹性容器
li标签.nav-item
a标签.nav-link 块级，设置了hover等伪类

<h5>水平导航</h5>
<ul class="nav nav-justified"><li class="nav-item"><a class="nav-link" href="#">网页</a></li><li class="nav-item"><a class="nav-link" href="#">音乐</a></li><li class="nav-item"><a class="nav-link" href="#">图片</a></li><li class="nav-item"><a class="nav-link" href="#">视频</a></li><li class="nav-item"><a class="nav-link" href="#">知道</a></li>
</ul>

选项卡导航

结构
ul .nav.nav-tabs 设置下边框，让后代.nav-link鼠标悬停时边框显示颜色
li.nav-item
a.nav-link —.active 被选中
内容部分
div .tab-content
div .tab-pane 与父元素tab-content配合，设置了display:none;----.active 显示 display:block

事件

自定属性写给a标签
a data-toggle="tab"

事件改变谁
div .tab-pane id="tab1"
a href="#tab1"

<ul class="nav nav-tabs"><li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#tab1">口红</a></li><li class="nav-item"><a data-toggle="tab" class="nav-link" href="#tab2">包包</a></li><li class="nav-item"><a data-toggle="tab" class="nav-link" href="#tab3">面膜</a></li><li class="nav-item"><a data-toggle="tab" class="nav-link" href="#tab4">鞋</a></li>
</ul>
<div class="tab-content"><div id="tab1" class="tab-pane active">TF,YSL,Dior,故宫,mac</div><div id="tab2" class="tab-pane">Dior,LV,爱马仕,chanel,guuci</div><div id="tab3" class="tab-pane">SKII,雅诗兰黛,中草堂,海蓝之谜</div><div id="tab4" class="tab-pane">AJ，yezee</div>
</div>

胶囊导航

结构
ul .nav.nav-pills
li .nav-item
a .nav-link— .active 被选中
内容部分
div .tab-content
div .tab-pane 与父元素tab-content配合，display:none----.active 显示 display:block

事件

自定属性写给谁
a data-toggle="pill"

事件改变谁
div .tab-pane id="tab1"
a href="#tab1"

<h5>胶囊导航</h5>
<ul class="nav nav-pills"><li class="nav-item"><a data-toggle="pill" class="nav-link" href="#tab5">运动鞋</a></li><li class="nav-item"><a data-toggle="pill" class="nav-link" href="#tab6">电子产品</a></li><li class="nav-item"><a data-toggle="pill" class="nav-link" href="#tab7">汽车</a></li><li class="nav-item"><a data-toggle="pill" class="nav-link" href="#tab8">手表</a></li>
</ul>
<div class="tab-content"><div id="tab5" class="tab-pane">AJ1,AJ11,AJ12,AJ13</div><div id="tab6" class="tab-pane">macbookPro,PS,AnyWare</div><div id="tab7" class="tab-pane">五菱宏光,眼镜蛇，地狱猫，GTR,大G,F650,恩佐</div><div id="tab8" class="tab-pane">江诗丹顿,百达翡丽,卡地亚，欧米伽</div>
</div>

响应式导航栏
div .navbar 弹性，x轴
.navbar-expand-* *:sm/md/lg/xl
与ul的.navbar-nav配合
在屏幕以上让li横向显示
在屏幕以下让li纵向显示
ul .navbar-nav 弹性，y轴
li .nav-item
a .nav-link

<h5>响应式导航栏</h5>
<!-- lg屏幕以上,横向显示 -->
<!-- lg屏幕一下,纵向显示 -->
<div class="navbar navbar-expand-lg"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="">GTR</a></li><li class="nav-item"><a class="nav-link" href="">大G</a></li><li class="nav-item"><a class="nav-link" href="">F650</a></li><li class="nav-item"><a class="nav-link" href="">恩佐</a></li></ul>
</div>

折叠

结构
button
+div .collapse 设置了隐藏 display:none;

事件
button data-toggle="collapse" data-target="#d1" 绑定要折叠的div的id

<h5>折叠</h5>
<button data-toggle="collapse" data-target="#d1" class="btn btn-danger">折叠按钮</button>
<div id="d1" class="collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quod maxime aliquam minus molestias quisquam unde qui dolores voluptatem consectetur distinctio deleniti corporis optio similique sit nesciunt saepe recusandae aut.
</div>

折叠导航栏

结构
div .navbar
.navbar-dark 让div内部所有文本，变成白色。但是要单独写背景色.bg-dark
.navbar-expand-* 有三个功能
1.与后代button配合，让按钮在*以上隐藏，*以下显示
2.与后代ul配合，让li在*以上横向显示，*以下纵向显示
3.与后代div .navbar-collapse配合,让div在*以上显示，在*以下隐藏
a .navbar-brand 商标,有内边距，外边距，字号，行高，hover去下划线
button .navbar-toggler
span .navbar-toggler-icon
div#d1 .collapse .navbar-collapse 让div在*以上可以显示，*以下隐藏
ul .navbar-nav
li .nav-item
a .nav-link

事件
button data-toggle="collapse" data-target="#d1"

<h5>折叠导航栏</h5>
<div class="navbar bg-dark navbar-dark navbar-expand-md"><!-- 1.任何情况都显示的a标签 --><a class="navbar-brand" href="#">Bootstrap中文网</a><!-- 2.md以上不显示，md以下显示的按钮，并且是激活折叠的按钮 --><button data-toggle="collapse" data-target="#d1" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button><!-- 3.折叠的div，div内部的ul>li，在md以上横向显示，md以下纵向显示 --><div id="d1" class="collapse navbar-collapse"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">boot3</a></li><li class="nav-item"><a class="nav-link" href="#">boot4</a></li><li class="nav-item"><a class="nav-link" href="#">sass教程</a></li><li class="nav-item"><a class="nav-link" href="#">jQuery</a></li><li class="nav-item"><a class="nav-link" href="#">项目实例</a></li></ul></div>
</div>

焦点轮播图

轮播图片
div .carousel 相对定位，让后代以我定位
div .carousel-inner 相对定位，w-100,溢出隐藏
div .carousel-item*4 相对定位，w-100, display:none
.active 在一个item上添加active，让这张图片display:block
img .w-100(防止左右箭头会溢出)
事件最外层含.carousel的div 后添加data-ride="carousel"
轮播指示器
ul .carousel-indicators 绝对定位，弹性主轴为x
li
需要重写li的样式
```
    .carousel-indicators li{width: 0.8rem;height: 0.8rem;border-radius: 50%;background: #fff;}.carousel-indicators .active{background: #0aa1ed;}
```
事件 li
data-target="#demo" #demo是div .carousel的id
data-slide-to="0" 图片的下标

左右箭头
a .carousel-control-next/prev
span .carousel-control-next/prev-icon 画箭头
注意重写样式

.carousel-control-prev,.carousel-control-next {width:4%;height:20%;background: #aaa;top:40%;border-radius: 0.25rem;
}

事件
a data-slide="prev/next" href="#demo"
完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>焦点轮播图</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/bootstrap.css"><script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script><style>.carousel-indicators li {width: .8rem;height: .8rem;background: #fff;border-radius: 50%;}.carousel-indicators .active{background-color: #0aa1ed;}.carousel-control-prev,.carousel-control-next{width: 4%;height: 20%;background-color: #aaa;top: 40%;border-radius: .25rem;}.carousel-control-prev{left: .25rem;}.carousel-control-next{right: .25rem;}</style></head><body><div class="container"><div id="demo" class="carousel" data-ride="carousel"><!-- 1.轮播图片 --><div class="carousel-inner"><div class="carousel-item active"><img class="w-100" src="img/banner1.png" alt=""></div><div class="carousel-item"><img class="w-100" src="img/banner2.png" alt=""></div><div class="carousel-item"><img class="w-100" src="img/banner3.png" alt=""></div><div class="carousel-item"><img class="w-100" src="img/banner4.png" alt=""></div></div><!-- 2.轮播指示器 --><ul class="carousel-indicators"><li data-target="#demo" data-slide-to="0" class="active"></li><li data-target="#demo" data-slide-to="1"></li><li data-target="#demo" data-slide-to="2"></li><li data-target="#demo" data-slide-to="3"></li></ul><!-- 3.左右箭头 --><a data-slide="prev" href="#demo" class="carousel-control-prev"><span class="carousel-control-prev-icon"></span></a><a data-slide="next" href="#demo" class="carousel-control-next"><span class="carousel-control-next-icon"></span></a></div></div></body>
</html>

T-Bootstrap-day03-弹性布局、表单、常见组件相关推荐

Flexbox 布局 – 表单
Flexbox 布局 – 表单 1.行内块元素间隔看一个效果: <form><input type="email" name="email" ...
bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...
开发指南专题十：JEECG微云快速开发平台--表单校验组件ValidForm
开发指南专题十:JEECG微云快速开发平台--表单校验组件ValidForm 10.4Validform对象[方法支持链式调用] 如示例 var demo=$(".formsub" ...
开发指南专题九：JEECG微云快速开发平台-表单校验组件ValidForm
开发指南专题九:JEECG微云快速开发平台表单校验组件ValidForm 10.表单校验组件ValidForm 10.1使用入门 1.引入css 请查看下载文件中的style.css,把里面Valid ...
html中单选框重置,HTML表单和组件
原标题:HTML表单和组件表单基本所有的网页无非就是在做两件事情:1.呈现数据给客户看,2.接收用户输入的数据.所以表单就是用来收集用户输入的数据,然后提交给服务器. 示例图: 表单在网页中主要负 ...
Django之Form表单验证组件Tyrion
Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...
Vue 的电商 SKU 表单配置组件
下载地址Vue 的电商 SKU 表单配置组件,多条件筛选计算价格和库存. dd:
Bootstrap系列 -- 11. 基础表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...
python-flask(二)集成bootstrap、集成web表单、集成邮件发送
文章目录一.flask集成bootstrap 1. 什么是Bootstrap? 2. Flask中如何集成Bootstrap? 3. Flask-Bootstrap实现了什么? 二.Flask中集成 ...
Bootstrap系列 -- 41. 带表单的导航条
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个"navbar-form",使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单.nav ...

T-Bootstrap-day03-弹性布局、表单、常见组件

文章目录

五.弹性布局的class

六.表单

组件

一.常用组件

T-Bootstrap-day03-弹性布局、表单、常见组件相关推荐

最新文章

热门文章