认识CSS组件
导入的链接
<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
<script src="jquery-3.3.1.slim.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
按钮
1 定义按钮
<!--使用<button>元素定义按钮-->
<button class="btn">Button</button>
<!--使用<a>元素定义按钮-->
<a class="btn" href="#">Link</a>
<!--使用<input>元素定义按钮-->
<!--没value="Input"就输入框中没有默认值-->
<input class="btn" type="button" value="Input" ><!--input使用按钮需要加这些 type="button" value="Input"-->
2 设计按钮风格
- 设计背景颜色
Bootstrap 4为按钮定制了多种背景颜色类，包括.btn-primary、.btn-secondary、.btn-success、.btn-danger、.btn-warning、.btn-info、.btn-light和.btn-dark。
<!--type="button"是html的属性，可加与不加-->
<button type="button" class="btn btn-primary">主要</button>
<button class="btn btn-secondary">次要</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">信息</button>
<button class="btn btn-light">明亮</button>
<button class="btn btn-dark">黑暗</button>
- 设计边框颜色
在btn类的引用中，如果不希望按钮带有沉重的背景颜色，可以使用.btn-outline-来设置按钮的边框。可以从primary、secondary、success、danger、warning、info、light和dark进行选择。
注意：添加.btn-outline-*的按钮，其文本颜色和边框颜色是相同的。
<!--btn-outline-*来设计边框按钮边框颜色-->
<button type="button" class="btn btn-outline-primary">主要</button>
<button type="button" class="btn btn-outline-secondary">次要</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-light">明亮</button>
<button type="button" class="btn btn-outline-dark">黑暗</button>
- 设计大小
Bootstrap 4中定义了2个设置按钮大小的类，可以根据网页布局选择合适大小的按钮。
<!-- btn-lg大号按钮 btn-sm小号按钮-->
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认大小</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
- 激活和禁用状态
激活状态：在按钮添加active类可实现激活状态。激活状态下，按钮背景颜色更深、边框变暗、带内阴影。
禁用状态：将disabled属性添加到
<button href="#" class="btn btn-primary active">激活状态</button>
<button type="button" class="btn btn-primary" disabled>禁用状态</button>
<a href="# " class="btn btn-primary" aria-disabled="true">a的禁用状态disabled无效</a>
<button href="#" class="btn btn-primary">默认状态</button>
按钮组（重点）
1 定义按钮组
使用含有btn-group类的容器包含一系列的<a>或<button>标签，可以生成一个按钮组。
<div class="btn-group">
<button type="button" class="btn btn-primary">主页</button>
<button type="button" class="btn btn-warning">列表页</button>
<button type="button" class="btn btn-info">详情页</button>
<button type="button" class="btn btn-secondary">评论页</button>
</div>
2 定义按钮组工具栏
- 将多个按钮组（btn-group）包含在一个含有btn-toolbar类的容器中，可以将按钮组组合成更复杂的按钮工具栏。
<div class="btn-toolbar"><!--按钮组工具栏-->
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary">上一页</button>
</div>
<div class="btn-group mr-2">
<button type="button" class="btn btn-warning">1</button>
<button type="button" class="btn btn-warning">2</button>
<button type="button" class="btn btn-warning">3</button>
<button type="button" class="btn btn-warning">4</button>
<button type="button" class="btn btn-warning">5</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">下一页</button>
</div>
</div>
- 按钮组工具栏结合输入框
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group"><!--"input-group"输入组么-->
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">@</div>
</div>
<input type="text" class="form-control" value="邮箱">
</div>
</div>
3 设计按钮组布局和样式
- 嵌套按钮组
将一个按钮组放在另一个按钮组中，可以实现按钮组与下拉菜单的组合。
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
主题模板
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">主题门户</a>
<a class="dropdown-item" href="#">精选模板</a>
</div>
</div>
- 垂直布局
把一系列按钮包含在含有btn-group-vertical类的容器中，可以设计垂直分布的按钮组。
<!--添加下拉菜单-->
<!--下面的是全部包在一个div里-->
<div class="dropright">
<!--data-toggle="dropdown"激活下拉菜单的交互行为；dropdown-toggle可设置一个指示小三角-->
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
美食
</button>
<div class="dropdown-menu"><!--下拉菜单的功能选项必须包含在dropdown-menu类中-->
<a class="dropdown-item" href="#">牛奶</a>
<a class="dropdown-item" href="#">蛋糕</a>
</div>
</div>
- 控制按钮组大小
给含有btn-group类的容器中添加btn-group-lg或btn-group-sm类，可以设计按钮组的大小。
<div class="btn-group btn-group-lg mr-2">
<button type="button" class="btn btn-primary">大号按钮组</button>
<button type="button" class="btn btn-primary">大号按钮组</button>
</div><hr/>
<div class="btn-group mr-2">
<button type="button" class="btn btn-warning">默认大小</button>
<button type="button" class="btn btn-warning">默认大小</button>
</div><hr/>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-info">小号按钮组</button>
<button type="button" class="btn btn-info">小号按钮组</button>
</div>
下拉菜单
1 定义下拉菜单
一般情况下使用从<a>或<button>触发下拉菜单，以适应使用的需求。
在下拉菜单基本结构中，通过为激活按钮添加data-toggle="dropdown"属性，可激活下拉菜单的交互行为；添加.dropdown-toggle类，来设置一个指示小三角。
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">激活按钮</button>
<div class="dropdown">
<button>触发按钮</button>
<div class="dropdown-menu">下拉菜单内容</div>
</div>
如果下拉菜单组件不包含在dropdown类容器中，可以使用声明为position: relative;的元素。
<div style="position:relative;">
<button>触发按钮</button>
<div class="dropdown-menu">下拉菜单内容</div>
</div>
2 设计下拉按钮的样式
- 分裂式按钮下拉菜单
<div class="dropright btn-group"><!--dropright下拉菜单按钮的方向-->
<button class="btn btn-secondary" type="button">激活按钮</button>
<button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">菜单项1</a>
<button class="dropdown-item" type="button">菜单项2</button>
</div>
</div>
- 向右展开菜单
<div class="dropright">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
激活按钮
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">菜单项1</a>
<button class="dropdown-item" type="button">菜单项2</button>
</div>
</div>
3 设计下拉菜单的样式
- 设计菜单分割线
使用添加dropdown-divider类的容器（div），添加到需要的位置，便可实现分割线效果。
<div class="dropdown-menu">
<button class="dropdown-item" type="button">菜单项1</button>
<button class="dropdown-item" type="button">菜单项2</button>
<button class="dropdown-item" type="button">菜单项3</button>
<div class="dropdown-divider"></div><!--下拉菜单中添加分割线-->
<button class="dropdown-item" type="button">菜单项4</button>
</div>
- 激活和禁用菜单项
添加.active设置激活状态，添加.disabled设置禁用状态。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
激活按钮
</button>
<div class="dropdown-menu"><!-- active表示激活按钮，表示下拉时上面颜色已经改变，变成鼠标点击时的状态-->
<button class="dropdown-item active" type="button">菜单项1</button>
<button class="dropdown-item" type="button">菜单项2</button>
<button class="dropdown-item" type="button">菜单项3</button>
<button class="dropdown-item disabled " type="button">菜单项4</button>
</div>
</div>
- 菜单项对齐
默认情况下，下拉菜单自动从顶部和左侧进行定位，可以为
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
激活按钮
</button>
<div class="dropdown-menu dropdown-menu-right"><!--dropdown-menu-right下拉菜单右对齐-->
<button class="dropdown-item" type="button">菜单项1</button>
<button class="dropdown-item" type="button">菜单项2</button>
<button class="dropdown-item" type="button">菜单项3</button>
<button class="dropdown-item " type="button">菜单项4</button>
</div>
</div>
- 菜单的偏移
在下拉菜单中，还可以设置菜单的偏移量，通过为激活按钮添加data-offset属性来实现。
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-offset="200,30">
激活按钮<!--data-offset="200,30"设置菜单的偏移量-->
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">菜单项1</button>
<button class="dropdown-item" type="button">菜单项2</button>
<button class="dropdown-item" type="button">菜单项3</button>
</div>
</div>
- 菜单内容
在下拉菜单中不仅仅可以添加菜单项，可以添加任何你想添加的内容，例如：菜单项标题、文本、表单等。
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle position-relative" data-toggle="dropdown">
激活按钮<!--position-relative这怎么使用的-->
</button>
<div class="dropdown-menu" style="max-width: 300px;">
<h6 class="dropdown-header" type="button">菜单标题</h6>
<button class="dropdown-item" type="button">菜单项1</button>
<button class="dropdown-item" type="button">菜单项2</button>
<hr>
<p class="mx-3">下拉菜单中的文本内容,下拉菜单中的文本内容</p>
<hr>
<form action="" class="mx-3">
<input type="text" placeholder="姓名"><br/>
<input type="password" placeholder="密码">
</form>
</div>
</div>
导航（重点没怎么理解）
1 定义导航
Bootstrap中提供的导航可共享通用标记和样式，例如基础的nav样式类和活动与禁用状态类。基础的nav组件采用Flexbox弹性布局构建，并为构建所有类型的导航组件提供了坚实的基础，包括一些样式覆盖。
Bootstrap导航组件一般以列表结构为基础进行设计，在<ul>上添加nav类，在每个<li> 选项上添加nav-item类，在每个链接上添加nav-link类。
bootstrap4中，Nav类可以使用在其他元素上，非常灵活，不仅仅可以在<ul>列表中，也可以自定义一个<nav>元素。因为nav类基于Flexbox弹性盒子定义，导航链接的行为与导航项目相同，不需要额外的标记。
<ul class="nav nav-tabs"><!--nav-tabs 标签页导航-->
<li class="nav-item">
<a class="nav-link active" 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 disabled" href="#">关于我们</a>
</li>
</ul>
2 设计导航的布局
- 居中对齐
<!--在<ul>上添加nav类，在<li>上添加nav-link类-->
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">网站首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">新闻中心</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">模板展示</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">关于我们</a>
</li>
</ul>
<h3 class="my-5 mb-3">右对齐</h3>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" 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 disabled" href="#">关于我们</a>
</li>
</ul>
- 垂直分布
<ul class="nav flex-md-column border"><!--flex-column可以设置导航的垂直布局-->
<li class="nav-item">
<a class="nav-link active" 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 disabled" href="#">关于我们</a>
</li>
</ul>
3 设计导航的风格
- 设计标签页导航
为导航添加nav-tabs类可以实现标签页导航，然后对选中的选项使用active类进行标记。
标签页导航可以结合bootstrap中的下拉菜单组件，来设计带下拉菜单的标签页导航。
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">网站首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">新闻中心</a>
<div class="dropdown-menu">
<a class="dropdown-item active" href="#">新闻1</a>
<a class="dropdown-item" href="#">新闻2</a>
<a class="dropdown-item" href="#">新闻3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">模板展示</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">关于我们</a>
</li>
</ul>
- 设计胶囊式导航
为导航添加nav-pills类可以实现胶囊式导航，然后对选中的选项使用active类进行标记。
胶囊式导航可以结合bootstrap中的下拉菜单组件，来设计带下拉菜单的胶囊式导航。
<ul class="nav nav-pills"><!--nav-pills胶囊式导航:nav-pills为下面的li中有active的设置背景色蓝色-->
<li class="nav-item">
<a class="nav-link active" 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 disabled" href="#">关于我们</a>
</li>
</ul>
带下拉菜单的胶囊式导航
ul class="nav nav-pills">
<li class="nav-item ">
<a class="nav-link active" href="#">网站首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">新闻中心</a>
<div class="dropdown-menu">
<a class="dropdown-item active" href="#">新闻1</a>
<a class="dropdown-item" href="#">新闻2</a>
<a class="dropdown-item" href="#">新闻3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">模板展示</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">关于我们</a>
</li>
</ul>
- 填充和对齐
对于导航的内容有一个扩展类nav-fill，nav-fill类会将含有nav-item类的元素按照比例分配空间。
注意：nav-fill类是分配导航所有的水平空间，不是设置每个导航项目的宽度相同。
<ul class="nav nav-pills nav-fill"><!--整体空间感比较足-->
<li class="nav-item">
<a class="nav-link active" 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 disabled" href="#">关于我们</a>
</li>
</ul>
4 设计导航选项卡
导航选项卡就像tab栏一样，切换tab栏中每个项可以切换对应内容框中的内容。在bootstrap4中，导航选项卡一般在标签页导航和胶囊式导航的基础上实现。
<div class="row">
<div class="col-4">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#head">网站首页</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#new">新闻中心</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#template">模板展示</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#about">关于我们</a>
</li>
</ul>
</div>
<div class="col-8">
<div class="tab-content"><!--tab-content类定义类容显示框-->
<!--这里只要id值与href值相等就可以进行锚链接-->
<div class="tab-pane active" id="head">网站首页内容</div>
<!--tab-pane 实现切换淡入效果-->
<div class="tab-pane " id="new">新闻中心内容</div>
<div class="tab-pane" id="template">模板展示内容</div>
<div class="tab-pane" id="about">关于我们内容</div>
</div>
</div>
</div>
超大屏幕
1 定义超大屏幕
超大屏幕是一个使用jumbotron类定义的一个包含框，里面可以根据需要添加相应的内容。
<div class="jumbotron">
<h1 class="display-4">公司口号</h1>
<p class="lead">同舟共济 分享共赢</p>
<p class="lead">同心同行 共创未来</p>
<hr class="my-4">
<p class="lead">我付出，我收获，我承担，我成长。</p>
<a class="btn btn-primary btn-lg" href="#">更多...</a>
</div>
2 设计风格
如果想要超大屏占满当前浏览器宽度并且不带有圆角，只要添加.jumbotron-fluid类，并在里面添加一个container或container-fluid类，来设置间隔空间即可。
<div class="jumbotron jumbotron-fluid"><!--占满当前浏览器width，且不带有圆角-->
<div class="container">
<h1 class="display-4">公司口号</h1>
<p class="lead">同舟共济 分享共赢</p>
<p class="lead">同心同行 共创未来</p>
<hr class="my-4">
<p class="lead">我付出，我收获，我承担，我成长。</p>
<a class="btn btn-primary btn-lg" href="#">更多...</a>
</div>
</div>
记录阅读
《Bootstrap从入门到项目实战》的笔记
努力拼搏吧，不要害怕，不要去规划，不要迷茫。但你一定要在路上一直的走下去，尽管可能停滞不前，但也要走。
