Bootstrap4 学习笔记

最新推荐文章于 2022-05-08 21:26:53 发布

爱幻想-hjyp

最新推荐文章于 2022-05-08 21:26:53 发布

阅读量344

点赞数

分类专栏：杂记

本文链接：https://blog.csdn.net/qq_43705697/article/details/104307999

版权

杂记专栏收录该内容

10 篇文章 2 订阅

订阅专栏

布局

1 .container

.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

排版

1.文字对齐

<div class="container">
  <h2>排版</h2>
  <p class="text-left">左对齐</p>
  <p class="text-right">右对齐</p>      
  <p class="text-center">居中对齐文本</p>
  <p class="text-justify">设定文本对齐,。。。。。。。。。。。。。。段落中超出屏幕部分文字自动换行</p>      
  <p class="text-nowrap">段落中超出屏幕。。。。。。。。。。。。。。。部分不换行</p>
  <p class="text-uppercase">字母大写</p>
  <p><strong>提示:</strong> 重置浏览器窗口大小查看换行效果。</p>      
</div>

颜色

1.文字颜色

<div class="container">
  <h2>代表指定意义的文本颜色</h2>
  <p class="text-muted">柔和的文本。灰色</p>
  <p class="text-primary">重要的文本。蓝色</p>
  <p class="text-success">执行成功的文本。绿色</p>
  <p class="text-info">代表一些提示信息的文本。浅蓝</p>
  <p class="text-warning">警告文本。黄色</p>
  <p class="text-danger">危险操作文本。红色</p>
  <p class="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>

2.背景颜色

<div class="container">
  <h2>背景颜色</h2>
  <p class="bg-primary text-white">重要的背景颜色。</p>
  <p class="bg-success text-white">执行成功背景颜色。</p>
  <p class="bg-info text-white">信息提示背景颜色。</p>
  <p class="bg-warning text-white">警告背景颜色</p>
  <p class="bg-danger text-white">危险背景颜色。</p>
  <p class="bg-secondary text-white">副标题背景颜色。</p>
  <p class="bg-dark text-white">深灰背景颜色。</p>
  <p class="bg-light text-dark">浅灰背景颜色。</p>
</div>

表格

1.表格样式

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;

2.其他表格样式

<div class="container">
<table class="table table-striped">条纹样式，每行颜色不一样</table>
<table class="table table-bordered">带边框样式</table>
<table class="table table-hover">鼠标悬停样式，变颜色</table>
<table class="table table-dark">黑色背景样式</table>
<table class="table table-bordered table-sm">减小内边距设定较小的表格
<div class="table-responsive">响应式表格
<table class="table">
</div>

//其他颜色，用于设定每行的颜色
.table-primary	蓝色: 指定这是一个重要的操作
.table-success	绿色: 指定这是一个允许执行的操作
.table-danger	红色: 指定这是可以危险的操作
.table-info	浅蓝色: 表示内容已变更
.table-warning	橘色: 表示需要注意的操作
.table-active	灰色: 用于鼠标悬停效果
.table-secondary	灰色: 表示内容不怎么重要
.table-light	浅灰色，可以是表格行的背景
.table-dark	深灰色，可以是表格行的背景

图像形状

<div class="container">
  <h2>圆角图片</h2>
  /*rounded 类可以让图片显示圆角效果*/            
  <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236"> 
  /*rounded-circle 椭圆形图片*/
  <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
  /*img-fluid 自适应大小，设定max-width：100% */
  <img class="img-fluid" src="img_chania.jpg" alt="Chania">
  /*左对齐和右对齐*/
  <img src="paris.jpg" class="float-left"> 
  <img src="cinqueterre.jpg" class="float-right">
</div>

超大屏幕

Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。

/*有圆角和没有圆角，添加container后没有圆角*/
<div class="jumbotron jumbotron-fluid">
  <div class="container">
      <h1>菜鸟教程</h1> 
      <p>学的不仅是技术，更是梦想！！！</p>
  </div>
</div>

提示框

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现

<div class="container">
  <h2>提示框</h2>
  <p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
  /*可以添加链接*/
  <div class="alert alert-success">
    <strong>成功!</strong> 指定操作成功提示信息<a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-info">
    <strong>信息!</strong> 请注意这个信息。
  </div>
  <div class="alert alert-warning">
    <strong>警告!</strong> 设置警告信息。
  </div>
  <div class="alert alert-danger">
    <strong>错误!</strong> 失败的操作
  </div>
  <div class="alert alert-primary">
    <strong>首选!</strong> 这是一个重要的操作信息。
  </div>
  <div class="alert alert-secondary">
    <strong>次要的!</strong> 显示一些不重要的信息。
  </div>
  <div class="alert alert-dark">
    <strong>深灰色!</strong> 深灰色提示框。
  </div>
  <div class="alert alert-light">
    <strong>浅灰色!</strong>浅灰色提示框。
  </div>
</div>

按钮

.btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
}
.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem

1.按钮样式，主要是填充颜色和边框颜色不同

按钮类可用于 < a>, < button>, 或 < input> 元素上

<div class="container">
  <h2>按钮样式</h2>
  <button type="button" class="btn">基本按钮</button>
  <button type="button" class="btn btn-primary">主要按钮</button>
  <button type="button" class="btn btn-secondary">次要按钮</button>
  <button type="button" class="btn btn-success">成功</button>
  <button type="button" class="btn btn-info">信息</button>
  <button type="button" class="btn btn-warning">警告</button>
  <button type="button" class="btn btn-danger">危险</button>
  <button type="button" class="btn btn-dark">黑色</button>
  <button type="button" class="btn btn-light">浅色</button>
  <button type="button" class="btn btn-link">链接</button>      
</div>

2.按钮组

主要在一行显示多个按钮，导航栏那样，还有垂直按钮组，下拉按钮组

<div class="container">
  <h2>按钮组大小</h2>
  <p>我们可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。</p>
  <h3>大按钮:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  /*垂直按钮组及下拉菜单*/
  <div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>
</div>

菜单

1.下拉菜单

<div class="container">
	<div class="dropdown">
	  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropdown link
	  </a>

	  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
		<a class="dropdown-item" href="#">Action</a>
		<h5 class="dropdown-header">Dropdown header</h5>/*下拉菜单标题*/
		<a class="dropdown-item" href="#">Another action</a>
		<div class="dropdown-divider"></div>/*创建分割线*/
		<a class="dropdown-item" href="#">Something else here</a>
	  </div>
	</div>
</div>

<div class="container">
  <h2>导航</h2>
  <p>左对齐导航 (默认):</p>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
  <p class="text-center">居中对齐导航:</p>
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
    
  <p class="text-right">右对齐导航:</p>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</div>

导航栏

导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 < ul> 元素并添加 class=“navbar-nav” 类。然后在

元素上添加 .nav-item 类， < a> 元素上使用 .nav-link 类:

<!-- 小屏幕上水平导航栏会切换为垂直的 -->
<nav class="navbar navbar-expand-sm bg-light">
 
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
 
</nav>

输入框组

我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。

使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。

最后，我们还需要使用 .input-group-text 类来设置文本的样式。

/*mt是margin-top缩写*/
<div class="container mt-3">
  <h3>输入框组</h3>
  <p> .input-group .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮，.input-group-prepend 类添加在前面，.input-group-append 添加在后面。</p>
  <p>使用 .input-group-text 类来设置文本的样式。</p>
  
  <form action="/action_page.php">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" id="usr" name="username">
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Your Email" id="mail" name="email">
      <div class="input-group-append">
        <span class="input-group-text">@runoob.com</span>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框

爱幻想-hjyp

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap4 学习笔记

布局1 .container.container {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}排版1.文字对齐<div class="container"> <h2>排版</h2> <p cl...
复制链接

扫一扫