文章目录
Bootstrap5详细讲解
0.介绍
使用 Bootstrap 构建快速、响应式布局的网站
Bootstrap 是全球最流行的前端开源工具包，它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。
1.快速开始
doctype html> <html lang="zh-CN"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-dRYOpy/KcUgZUv3UgAdBrl5jPEmH+fTv2Vu1Bq4Wsr2/779iKnon9o5hZZVSM76I" crossorigin="anonymous"> <title>Hello, world!
title>
head> <body> <h1>Hello, world!
h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-KIT91OlDmsIXvQaqzxNONuO4ve97S3yDh9A0nea67fEK+03Wdyc/3oGgd0+DPaf7" crossorigin="anonymous">
script>
body>
html> 或者下载Bootstrap源代码，然后保存到对应的项目下，引入的时候采用本地路径即可。
2.布局容器
<div class="container-fluid"> .container-fluid:横跨视口的全宽度的容器。
div> <div class="container"> .container：有最大固定宽度的容器。最大固定宽度依据于视口（viewport）的断点（breakpoints）而不同。
div> 3.网格系统
1.每行最多12列.
Bootstrap 4 网格系统有以下 5 个类:
2.不同设备显示不同列分布
3.偏移列
4.列嵌套
使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row
5.列排序
注意如果两个列移到同一位置,在编写时顺序靠后的会保留.
4.标题和段落
DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>标题（一）
title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
head> <body>
<h1>Bootstrap标题一
h1> <h2>Bootstrap标题二
h2> <h3>Bootstrap标题三
h3> <h4>Bootstrap标题四
h4> <h5>Bootstrap标题五
h5> <h6>Bootstrap标题六
h6>
<div class="h1">Bootstrap标题一
div> <div class="h2">Bootstrap标题二
div> <div class="h3">Bootstrap标题三
div> <div class="h4">Bootstrap标题四
div> <div class="h5">Bootstrap标题五
div> <div class="h6">Bootstrap标题六
div>
body>
html> 
副标题
DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>标题（二）
title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
head> <body>
<h1>Bootstrap标题一<small>我是副标题
small>
h1> <h2>Bootstrap标题二<small>我是副标题
small>
h2> <h3>Bootstrap标题三<small>我是副标题
small>
h3> <h4>Bootstrap标题四<small>我是副标题
small>
h4> <h5>Bootstrap标题五<small>我是副标题
small>
h5> <h6>Bootstrap标题六<small>我是副标题
small>
h6> 孤儿院无私奉献30年 一曲人性的赞歌
body>
html> 
段落,通过lead类名 突出强调内容.
DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>段落（正文文本）
title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
head> <body> <p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！
p> <p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！
p> <p>我是一个段落，你猜我在Bootstrap是以什么样的风格显示。
p>
body>
html>
DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>强调内容
title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
head> <body> <p>我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本，
p> <p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。
p>
body>
html> 
强调
HTML 的默认强调标签 （设置文本为父文本大小的 85%）、（设置文本为更粗的文本）、（设置文本为斜体）。
Bootstrap 提供了一些用于强调文本的类，如下面实例所示：
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 强调
title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">
script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
script>
head> <body> <small>本行内容是在标签内
small><br> <strong>本行内容是在标签内
strong><br> <em>本行内容是在标签内，并呈现为斜体
em><br> <p class="text-left">向左对齐文本
p> <p class="text-center">居中对齐文本
p> <p class="text-right">向右对齐文本
p> <p class="text-muted">本行内容是减弱的
p> <p class="text-primary">本行内容带有一个 primary class
p> <p class="text-success">本行内容带有一个 success class
p> <p class="text-info">本行内容带有一个 info class
p> <p class="text-warning">本行内容带有一个 warning class
p> <p class="text-danger">本行内容带有一个 danger class
p>
body>
html> 
缩写
文本对齐
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐
<p class="text-left">我居左
p> <p class="text-center">我居中
p> <p class="text-right">我居右
p> <p class="text-justify">这个强调动手、项目主导的合作项目将首先提供科技方面的硕士学位，过几年会提供其他学位。未来其他学校和公司也可以加入此项目，按计划在 2025 年要招入超过 3000 名学生.华盛顿大学的临时校长 Ana Mari Cauce 表示：“我们和清华大学在这些年里一直有相关合作，但这次合作办学将把我们的关系推向一个新的高度。其他合作项目涉及到华盛顿地区的法律学校和放射学部门
p> 
5.列表
ul 无序列表，使用list-unstyled修饰则去掉无序列表的点。
<div class="container"> <h2>排版
h2> <p>The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):
p> <ul class="list-unstyled"> <li>Coffee
li> <li>Tea <ul> <li>Black tea
li> <li>Green tea
li>
ul>
li> <li>Milk
li>
ul>
div> 内联列表：通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。
水平定义列表：给
添加类名“
.dl-horizontal”给定义列表实现水平显示效果
注：只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。当你缩小你的浏览器屏幕时，水平定义列表将回复到原始的状态。
6.代码块
>
代码长度过长可以用.pre-scrollable添加滚动条, 区域内会保留代码的所有格式包括空格和回车,显示html的标签需要使用字符实体< < > >
显示用户输入代码,如快捷键:
<code>this is a simple code
code>
<pre> const foo = function(){ console.log('hello word') }
pre>
<pre> <h2>标题2
h2> <h2>hello world<h2>
pre> <pre class="pre-scrollable"> <ul> <li>.........
li> <li>.........
li> <li>.........
li> <li>.........
li> <li>.........
li> <li>.........
li> <li>.........
li> <li>.........
li> <li>.........
li> <li>.........
li>
ul>
pre>
<p>使用<kbd>ctrl
kbd>+<kbd>c
kbd>复制内容
p> 
7.表格
.table 基础样式
<table class="table"> <thead> <tr> <th>姓
th> <th>名
th> <th>朝代
th>
tr>
thead> <tbody> <tr> <td>李
td> <td>白
td> <td>唐
td>
tr> <tr> <td>韩
td> <td>愈
td> <td>唐
td>
tr> <tr> <td>王
td> <td>安石
td> <td>宋
td>
tr>
tbody>
table> .table-striped 条纹效果
.table-bordered 边框
.table-hover 悬停高亮
.table-dark 黑色背景
可以给 或 添加table-*为每一行或每个单元格设置颜色
<table class="table"> <thead> <tr> <th>姓
th> <th>名
th> <th>朝代
th>
tr>
thead> <tbody> <tr> <td>李
td> <td>白
td> <td>唐
td>
tr> <tr class="table-primary"> <td>韩
td> <td>愈
td> <td>唐
td>
tr> <tr class="table-success"> <td>王
td> <td>安石
td> <td>北宋
td>
tr> <tr class="table-danger"> <td>欧阳
td> <td>修
td> <td>北宋
td>
tr> <tr class="table-info"> <td>司马
td> <td>迁
td> <td>西汉
td>
tr> <tr class="table-warning"> <td>杨
td> <td>修
td> <td>曹魏
td>
tr> <tr class="table-active"> <td>曹
td> <td>操
td> <td>曹魏
td>
tr> <tr class="table-secondary"> <td>曹
td> <td>植
td> <td>曹魏
td>
tr> <tr class="table-light"> <td>施
td> <td>耐庵
td> <td>元
td>
tr> <tr class="table-dark text-dark"> <td>苏
td> <td>轼
td> <td>北宋
td>
tr>
tbody>
table> 
.table-sm CSS 类用于通过减少内边距来设置紧凑的表格
8.表单
input 文本框和textarea文本域
.form -control 表单元素的样式 ，input-lg,input-sm 设置文本框大小。
select下拉框
.from-control 表单元素的样式
mutiple="mutiple" 设置下拉框多选。
9.单选框和复选框
<div class="row"> <div class="col-md-3"> <div class="radio"> <label for=""><input type="radio" name="sex" id="">男
label>
div> <div class="radio"> <label for=""><input type="radio" name="sex" id="">女
label>
div>
div>
div>
<div class="row"> <div class="col-md-3"> <div class="radio-inline"> <label for=""><input type="radio" name="sex" id="">男
label>
div> <div class="radio-inline"> <label for=""><input type="radio" name="sex" id="">女
label>
div>
div>
div>
<div class="row"> <div class="col-md-3"> <div class="checkbox"> <label for=""><input type="checkbox" name="hobby" id="">唱歌
label>
div> <div class="checkbox"> <label for=""><input type="checkbox" name="sex" id="">跳舞
label>
div>
div>
div>
<div class="row"> <div class="col-md-3"> <div class="checkbox-inline"> <label for=""><input type="checkbox" name="sex" id="">男
label>
div> <div class="checkbox-inline"> <label for=""><input type="checkbox" name="sex" id="">女
label>
div>
div>
div> 参考文章
标题和段落
文本对齐
代码块
表格
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/217242.html原文链接：https://javaforall.net
