Bootstrap4学习(一)

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

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

1.安装使用

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

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

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

使用BootCDN上的库比较方便。


<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.创建水平列组方法:

采用

将列组包含起来。

3.网格类:
超小设备 平板 桌面显示器 大桌面显示器 超大桌面显示器
col col-sm- col-md- col-lg- col-xl-

偏移类举例:offest-md-3

4.应用:

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

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

3.文本排版

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

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

一共4个Display类。

3.常用标签和类:

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

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

:显示虚下划线,鼠标移动至下划线处出现文字。

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

:显示文本中的空格和换行。

类名 描述
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

颜色示意:

Bootstrap4学习(一)_第1张图片

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-dismissableclass="close"data-dismiss="alert"实现提示框的关闭操作。

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

×是HTML实体字符,来表示关闭操作。

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

8.按钮

1.button类

基本按钮:

你可能感兴趣的:(前端)