Bootstrap 4 入门（bootstrap步骤）-技术教程-四时宝库

Bootstrap是一个开源的,响应式的,移动优先的前端CSS框架.其中某些互动效果需要依赖JQuery和Popper库,大部分情况可以只引用bootstrap的CSS就够了.

安装

有三种使用bootstrap的方式

npm包管理器

npm install bootstrap

2.CDN的方式

可以到下面的链接找到相应的CDN链接

https://www.bootstrapcdn.com/

3.手动下载代码

基本功能示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
 <title>Bootstrap</title>
</head>
<body>
<div class="container">
 <section class="content">
 <div class="display-4">侠客行</div>
 <blockquote class="blockquote">
 赵客缦胡缨，吴钩霜雪明。
 银鞍照白马，飒沓如流星。
 十步杀一人，千里不留行。
 事了拂衣去，深藏身与名。
 闲过信陵饮，脱剑膝前横。
 将炙啖朱亥，持觞劝侯嬴。
 三杯吐然诺，五岳倒为轻。
 眼花耳热后，意气素霓生。
 救赵挥金槌，邯郸先震惊。
 千秋二壮士，烜赫大梁城。
 纵死侠骨香，不惭世上英。
 谁能书阁下，白首太玄经。
 <div class="blockquote-footer">李白</div>
 </blockquote>
 </section>
</div>
</body>
</html>

使用bootstrap会:重置浏览器默认的样式,使应用样式后效果更加一致,1rem=16px,使用border-box计算尺寸,使用本地font.

Bootstrap内置颜色

文本颜色 text-COLOR

其中COLOR是一些内置的颜色关键字包括:

(primary,secondary,success,danger,warning,info,light,dark,white)

背景颜色 bg-COLOR 其中COLOR同上

<div class="container">
 <p class="text-primary bg-dark">Text of primary color</p>
 <p class="text-secondary bg-dark">Text of secondary color</p>
 <p class="text-success bg-dark">Text of success color</p>
 <p class="text-danger bg-dark">Text of danger color</p>
 <p class="text-warning bg-dark">Text of warning color</p>
 <p class="text-info bg-dark">Text of info color</p>
 <p class="text-light bg-dark">Text of light color</p>
 <p class="text-dark bg-white">Text of dark color</p>
 <p class="text-white bg-dark">Text of white color</p>
</div>

有关图片的基本样式

img-fluid 使得图片成为响应式的

rounded 加圆角

rounded-DIR

DIR可以是top,right,bottom,left,circle

rounded-0 清除圆角

float-left 左对齐

float-right 右对齐

text-center 显示模式是inline的时候用来居中图片

mx-auto 显示模式是block的时候用来居中图片

figure 用在<figure>标签中

figure-image 用在image标签

figure-caption

<style>
 img{
 display: block;
 }
</style>
<body>
<div class="container">
 <figure class="figure">
 <img class="img-fluid figure-img rounded mx-auto" src="bootstrap/fabian-grohs-597395-unsplash.jpg">
 <figcaption class="figure-caption">
 简单的图片说明
 </figcaption>
 </figure>
 <figure class="text-center">
 <img class="img-fluid figure-img rounded-circle mx-auto" src="bootstrap/frano-duvnjak-468807-unsplash.jpg">
 <figcaption>
 冬季雪景
 </figcaption>
 </figure>
</div>
</body>

内置CSS变量

Bootstrap默认内置了一些CSS变量,有关于颜色,breakpoint和字体的变量.

 --blue: #007bff;
 --indigo: #6610f2;
 --purple: #6f42c1;
 --pink: #e83e8c;
 --red: #dc3545;
 --orange: #fd7e14;
 --yellow: #ffc107;
 --green: #28a745;
 --teal: #20c997;
 --cyan: #17a2b8;
 --white: #fff;
 --gray: #6c757d;
 --gray-dark: #343a40;
 --primary: #007bff;
 --secondary: #6c757d;
 --success: #28a745;
 --info: #17a2b8;
 --warning: #ffc107;
 --danger: #dc3545;
 --light: #f8f9fa;
 --dark: #343a40;
 --breakpoint-xs: 0;
 --breakpoint-sm: 576px;
 --breakpoint-md: 768px;
 --breakpoint-lg: 992px;
 --breakpoint-xl: 1200px;
 --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

示例

<div class="container">
 <a style="color: var(--blue);" href="#">My Link</a>
</div>

可以自己写样式覆盖该变量

<style>
 :root{
 --blue:aqua;
 }
</style>

但是内置的text-primary等颜色不能被覆盖,具有更高的优先级.

四时宝库

程序员的知识宝库

Bootstrap 4 入门（bootstrap步骤）