Bootstrap4学习（一）

最新推荐文章于 2024-11-05 15:31:54 发布

目标是技术宅

最新推荐文章于 2024-11-05 15:31:54 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签：前端 Bootstrap4

本文链接：https://blog.csdn.net/ljfyyj/article/details/81913742

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文主要为http://www.runoob.com/bootstrap4/bootstrap4-tutorial.html

教程前半部分的总结与练习。

1.安装使用

Bootstrap要求使用HTML5文件类型，需要添加HTML5 doctype声明。

为使Bootstrap开发的网站对移动设备友好，确保适当的绘制和缩放，需要添加viewport meta标签。

width=device-width表示宽度是设备屏幕的宽度，initial-scale=1表示初始的缩放比例。

使用BootCDN上的库比较方便。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

2.网格系统

1.容器：

网页内容需要放置在container（固定宽度）或者container-fluid（全屏宽度）类的容器中。

对于网格系统，系统会自动分为最多12列。

2.创建水平列组方法：

采用<div class="row"></div>将列组包含起来。

3.网格类：

超小设备	平板	桌面显示器	大桌面显示器	超大桌面显示器
`col`	`col-sm-`	`col-md-`	`col-lg-`	`col-xl-`

偏移类举例：offest-md-3

4.应用：

如果只说明类，未标明宽度。Bootstrap可以自动布局，创建宽度相等的列。

可以通过设置，使得在不同的显示端，显示的情况不同：

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">

3.文本排版

1.所有HTML标题h1到h6有固定的样式。

2.Display类可以用来控制标题的样式。

一共4个Display类。

<h1 class="display-1"></h1>

3.常用标签和类：

<small>: 创建字号更小的颜色更浅的文本。

<h1>h1 标题 <small>副标题</small></h1>

<abbr>：显示虚下划线，鼠标移动至下划线处出现文字。

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<pre>：显示文本中的空格和换行。

类名	描述
`font-weight-bold/normal/light`	加粗、普通、更细的文本
`font-italic`	斜体文本
`small`	指定更小文本
`text-left/center/right`	文本对齐方式
`text-justify/nowrap`	段落中超出文本部分换行、不换行
`list-unstyled`	移除直接子列表项默认的列表样式
`list-inline`	所有列表放置同一行

4.颜色

1.颜色类：

text-primary 重要的文本

text-success/warning/danger

text-white/dark/light

2.背景颜色类：

bg-

5.表格

1.基础表格

<table class="table">
    <thead>
        <tr>
            <th>表格标题字段</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>表格内容字段</td>
        </tr>
    </tbody>
</table>

2.其它种类的表格：

table-striped 添加条纹

table-bordered 添加边框

table-hover 添加鼠标悬停效果

table-black 黑色背景

可以通过指定意义的颜色类为表格的行或者单元格设置颜色;

table-primary/success/danger/info/warning/active/secondary/light/dark

颜色示意：

这里写图片描述

thead-dark/light分别为表头添加黑色和灰色背景。

table-sm用于减少内边距设置较小的表格。

table-responsive用于创建响应式表格，屏幕宽度小于992px会创建水平滚动条。

table-responsive-sm/md/lg/xl屏幕宽度小于576、768、992、1200。

6.图像

rounded 圆角效果

rounded-circle 椭圆效果

float-right/left 左对齐或者右对齐

img-fluid 创建响应式图片

7.背景框和提示框

1.背景框

jumbotron创建大的灰色背景框

创建没有圆角的全屏幕：

<div class="jumbotron jumbotron-fluid">
  <div class="container">
      <h1>标题</h1> 
  </div>
</div>

2.提示框

alert加上alert-特定意义颜色类可以实现提示框的效果。

alert-link提示框中加入链接：

  <div class="alert alert-success">
  <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>
  </div>

提示框动画效果：

alert-dismissable和class="close"、data-dismiss="alert"实现提示框的关闭操作。

fade和show类设置提示框在关闭时淡入淡出效果。

&times是HTML实体字符，来表示关闭操作。

<div class="alert alert-success alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>成功!</strong> 指定操作成功提示信息。
  </div>

8.按钮

1.button类

基本按钮：<button type="button" class="btn">

btn-指定颜色类

btn-outline-指定颜色类 设置边框

btn-lg/sm 设置大、小号字母

btn-block 设置块状按钮

active 点击后的按钮

disabled 禁止点击的按钮

2.用于其他元素：

  <a href="#" class="btn btn-info" role="button">链接按钮</a>
  <button type="button" class="btn btn-info">按钮</button>
  <input type="button" class="btn btn-info" value="输入框按钮">
  <input type="submit" class="btn btn-info" value="提交按钮">

3.按钮组

<div class="btn-group">可以用来创建水平的按钮组，btn-group-vertical创建垂直的按钮组。

btn-group-lg/sm设置按钮组的大小。

9.徽章

通过<span class="badge badge-指定颜色类">徽章内容</span>创建徽章。

badge-pill类用来设置药丸形状的徽章。

10.分页

active高亮显示当前页面。

<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
</ul>

练习：

应用表格、图像、背景框、提示框、按钮、徽章，制作一个网页。

存在的主要问题就是语法不熟悉，需要查阅资料才能编写。

实现效果（少了两个主要人物）：

这里写图片描述

代码：

<!DOCTYPE html>
<head>
  <title>来自风平浪静的明天</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="text-primary text-center text-nowrap"><strong>来自风平浪静的明天</strong></h1>
        <h4 class="text-success text-right text-nowrap">人气角色评选</h4>
    </div>
</div>

<table class="table table-bordered table-hover table-striped">
    <thead class="thead-light">
        <tr>
            <th>角色名称</th>
            <th>声优</th>
        </tr>
    </thead>
    <tbody>
        <tr  class="table-info">
            <td>先岛光</td>
            <td>花江夏树</td>
        </tr>
        <tr  class="table-danger">
            <td>向井户爱花</td>
            <td>花泽香菜</td>
        </tr>
        <tr  class="table-primary">
            <td>比良平千咲</td>
            <td>茅野爱衣</td>
        </tr>
        <tr  class="table-warning">
            <td>伊佐木要</td>
            <td>逢坂良太</td>
        </tr>
        <tr  class="table-success">
            <td>木原纺</td>
            <td>石川界人</td>
        </tr>
    </tbody>
</table>

<div class="row">
    <div class="col-6">
    <img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=c56a2a62386d55fbd1cb7e740c4b242f/14ce36d3d539b600d90e490bec50352ac75cb74e.jpg"
     class="rounded img-fluid">
    </div>
    <div class="col-6">
        <div class="alert alert-warning alert-dismissible fade show">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>注意！</strong>左方高能！
        </div>
        <span class="badge badge-pill badge-danger">寡言</span>
        <span class="badge badge-pill badge-primary">成熟</span><br/><br/>
        <button type="button" class="btn btn-success">为木原纺投票</button>   
    </div>
</div>
</div>
</body>