Bootstrap入门

Qwe7

发布于 2022-06-01 08:25:37

4480

发布于 2022-06-01 08:25:37

文章被收录于专栏：网络收集

Bootstrap入门

一、概述

1.Bootstrap简介

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

2.为什么要使用bootstrap

众所周知bootstrap是一个非常好用的框架那么为什么大家都这么喜欢bootstrap呢

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它为开发人员创建接口提供了一个简洁统一的解决方案。

它包含了功能强大的内置组件，易于定制。

它还提供了基于 Web 的定制。

它是开源的。

3.Bootstrap包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

二、内容

1.什么是bootstrap

bootstrap文档：https://v4.bootcss.com/docs/getting-started/introduction/

Bootstrap介绍

由twitter程序员 , 为解决内部一些问题发明出来的一款前端框架

Bootstrap 是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。

目前比较流行的是Bootstrap3 和 Bootstrap4

优势 : 代码整洁风格统一响应式布局

劣势 : 不经常使用脱离文档很艰难

2.引入Bootstrap

如何引入Bootstrap

打开Bootstrap官网

1.可以下载Bootstrap软件包

2.可以直接引入CDN

引入Bootstrap

引入 css文件

引入 jquery文件

引入 popper.js

引入 Bootstrap.js

最基本的模板

请确保你的页面遵循了最新的设计和开发标准。也就是说，使用 HTML5 doctype 并包含 viewport meta 标签以实现正确的响应式行为。把这些东西攒在一起，你的页面应该是这样的：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

3.常用的class—页面内容

页面基本内容

标题 : h1 ~ h6

突出显示的标题 display 1~4

突出表示 lead mark

图片 img-fluid img-thumbnail

表格 table table-dark table-striped table-bordered table-borderless table-hover table-sm

表格颜色 table-active table-primary table-success table-danger table-warning table-info table-light table-dark

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色的表示方式</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
    <!--
        文字的颜色
        text-xxx
        text-danger 
        text-success
    -->
    <p class="text-danger">后宫佳丽三千人,铁杵磨成绣花针~</p>
    <p class="text-success">后宫佳丽三千人,铁杵磨成绣花针~</p>
    <p class="text-warning">后宫佳丽三千人,铁杵磨成绣花针~</p>
    <p class="text-primary">后宫佳丽三千人,铁杵磨成绣花针~</p>
    <p class="text-info">后宫佳丽三千人,铁杵磨成绣花针~</p>
    <p class="text-secondary">后宫佳丽三千人,铁杵磨成绣花针~</p>
    <p class="text-white">后宫佳丽三千人,铁杵磨成绣花针~</p>

    <!--
        背景的颜色  background
        bg-dange
    -->
    <p class="bg-danger text-white">后宫佳丽三千人,铁杵磨成绣花针~</p>
    <p class="bg-success text-white">后宫佳丽三千人,铁杵磨成绣花针~</p>
    <p class="bg-warning text-white">后宫佳丽三千人,铁杵磨成绣花针~</p>
    <p class="bg-primary text-white">后宫佳丽三千人,铁杵磨成绣花针~</p>
    <p class="bg-info text-white">后宫佳丽三千人,铁杵磨成绣花针~</p>
    <p class="bg-dark text-white">dark后宫佳丽三千人,铁杵磨成绣花针~</p>
    

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
    <!--
        页面内容 ->  排版 
    -->
    <h1>标题</h1>
    <!--
        如果普通的标签,也具有标题一样的样式
        class="h1"
    -->
    <div class="h1">这也是我的标题</div>
    <div class="h2">这也是我的标题</div>
    <div class="h3">这也是我的标题</div>
    <!--
        如果需要一个更突出的标题来显示的时候  考虑使用 display-数字    1~4   1大 -> 4小
    -->
    <p class="display-1">比大标题更突出</p>
    <p class="display-4">比大标题更突出</p>
    <!--
        突出显示普通的文字  lead 
    -->
    <p class="lead">我是文明人,所有的脏话都用唾液消毒过了~</p>
    <p>我是文明人,所有的脏话都用<mark>唾液</mark>消毒过了~</p>
    

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

4.常用的class----工具类

工具类

边框 border border-top -bottom -right -left

边框颜色 border-primary border-secondary border-success border-danger border-warning border-info border-light border-dark border-white

圆角 rounded rounded-circle

选择内容 user-select-all user-select-auto user-select-none

外边距内边距

p / m

x/ y / t / b / l /

0~5

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。