楼主: 朴白菜
473 1

[其他] Bootstrap 基础入门 [推广有奖]

  • 0关注
  • 0粉丝

等待验证会员

学前班

40%

还不是VIP/贵宾

-

0%
威望
0 级
论坛币
0 个
通用积分
0.0157
学术水平
0 点
热心指数
0 点
信用等级
0 点
经验
20 点
帖子
1
精华
0
在线时间
0 小时
注册时间
2018-10-24
最后登录
2018-10-24
楼主
朴白菜 发表于 2025-11-14 07:35:15 |AI写论文

+2 论坛币
k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群
赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

目录

  • Bootstrap 简介
  • 安装和使用
  • 布局容器和栅格网格系统
  • 常用样式
  • 表单
  • Bootstrap 插件
  • 注意事项
  • 响应式设计要点

Bootstrap 简介

什么是 Bootstrap

一套现成的 CSS 样式集合，最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局和移动设备优先的 WEB 项目。由 Twitter 员工 Mark Otto 和 Jacob Thornton 开发。

特点

简洁、直观且强大的前端开发框架，基于 HTML5、CSS3，具有友好的学习曲线。提供响应式设计，12列网格系统。自定义 jQuery 插件和完整的类库，丰富的组件。

资源

官网：http://getbootstrap.com/

中文网：http://www.bootcss.com/

安装和使用

下载

下载地址：http://v3.bootcss.com/getting-started/

文件结构

拷贝 

dist/css
中的 
bootstrap.min.css
 到项目 css 文件夹中。

拷贝 

dist/js
中的 
bootstrap.min.js
 到项目的 js 文件夹中。

下载 jQuery：http://jquery.com/

标准模板

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="utf-8">
 ? ?<!--使用X-UA-Compatible来设置IE浏览器兼容模式-->
 ? ?<meta http-equiv="X-UA-Compatible" content="IE=edge">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1">
 ? ?<title>Bootstrap的HTML标准模板</title>
 ? ?<!--载入BootStrap的CSS-->
 ? ?<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 ? ?<h1>Hello, world!</h1>
 ? ?
 ? ?<!--如果要使用Bootstrap的js插件，必须先调入jquery-->
 ? ?<script src="js/jquery-3.4.1.js"></script>
 ? ?<!--包括所有bootstrap的js插件或者可以根据需要使用的js插件调用-->
 ? ?<script src="js/bootstrap.min.js"></script>
</body>
</html>

viewport 说明 

width
: 视区的逻辑宽度 
device-width
: 视区宽度为设备屏幕宽度 
initial-scale
: 设置 Web 页面的初始缩放比例

布局容器和栅格网格系统

布局容器

固定宽度容器（支持响应式布局）

<div class="container">
 ?  ...内容...
</div>

全宽容器，100%宽度，占据全部视口 

<div class="container-fluid">
 ?  ...内容...
</div>

栅格网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统。随着屏幕或视口尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行与列的组合来创建页面布局，要输入的内容可以放入这些创建好的布局中。

网格系统必须使用到 CSS 

<!-- 布局容器 -->
<div class="container">
 ? ?<!-- 行元素 -->
 ? ?<div class="row">
 ? ? ? ?<!-- 列元素 -->
 ? ? ? ?<div class="col-md-4">4列</div>
 ? ? ? ?<div class="col-md-8">8列</div>
 ? ?</div>
</div>

栅格参数

屏幕尺寸类前缀容器最大宽度
超小屏幕 (<768px)
.col-xs-
自动
小屏幕 (≥768px)
.col-sm-
750px
中等屏幕 (≥992px)
.col-md-
970px
大屏幕 (≥1200px)
.col-lg-
1170px

列组合

列组合简单理解就是更改数字来合并列。列总和数不能超过12，大于12,则自动换到下一行。

<div class="row">
 ? ?<div class="col-md-4">4列</div>
 ? ?<div class="col-md-8">8列</div>
</div>

列偏移

如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或其他技术手段。这个时候可以使用列偏移 (offset) 功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名 "col-md-offset-*"（其中星号代表要偏移的列组合数），那么具有这个类名的列就会向右偏移。

要保证列与偏移列的总数不超过12，否则就会到下一行 

<div class="row">
 ? ?<div class="col-md-1">1列</div>
 ? ?<div class="col-md-1 col-md-offset-8">11列</div>
</div>

列排序

列排序其实就是改变列的方向，就是改变左右浮动，并设置浮动的距离。在 Bootstrap 框架的网格系统中是通过添加类名 "col-md-push-*" 和 "col-md-pull-*"（其中星号代表移动的列组合数）。往前 pull，往后 push 

<div class="row">
 ? ?<div class="col-md-1 col-md-push-10">1列</div>
 ? ?<div class="col-md-1 col-md-pull-1">2列</div>
</div>

列嵌套

Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或多个行 (row) 容器，然后在这个行容器中插入列 

<div class="row">
    <div class="col-md-6">
        <!-- 在里面再嵌套一个网格 -->
        <div class="row">
            <div class="col-md-3">3</div>
            <div class="col-md-6">6</div>
        </div>
    </div>
</div>

常用样式

排版

标题 Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签 <h1> 到 <h6>, 只不过 Bootstrap 覆盖了其默认的样式，使其在所有浏览器下显示效果一致。为了让非标题元素和标题使用相同的样式，还特意定义了 .h1~.h6 六个类名。同时后面可以紧跟着一行小的副标题 <small></small> 或者使用 .small 

<h1>h1. Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small">副标题</span></div>

段落

段落是排版中另一个重要元素之一。通过 .lead 来突出强调内容（其作用就是增大文本字号，加粗文本，并对行高和 margin 做相应的处理）。可以使用以下标签给文本做突出样式处理：

<small>
: 小号字 
<b><string>
: 加粗 
<i><em>
: 斜体 
<p class="lead">
    <small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong>
</p>

强调类

定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，使用样例如下：

<div class="text-muted">.text-muted：提示，使用浅灰色（#999）</div>
<div class="text-primary">.text-primary：主要，使用蓝色（#428bca）</div>
<div class="text-success">.text-success：成功，使用浅绿色(#3c763d)</div>
<div class="text-info">.text-info：通知信息，使用浅蓝色（#31708f）</div>
<div class="text-warning">.text-warning：警告，使用黄色（#8a6d3b）</div>
<div class="text-danger">.text-danger：危险，使用褐色（#a94442）</div>

对齐效果

在 CSS 中常常使用 

text-align
来实现文本的对齐风格设置。

为了简化操作，方便使用，Bootstrap 通过定义四个类名来控制文本的对齐风格：

.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">两端对齐文本</p>

列表

在 HTML 文档中，列表结构主要有三种：无序列表：

<ul><li>...</li></ul>
有序列表：
<ol><li>...</li></ol>
 定义列表：
<dl><dt>...</dt><dd>...</dd></dl>

去点列表

class="list-unstyled"
<ul class="list-unstyled">
    <li>无序项目列表一</li>
    <li>无序项目列表二</li>
</ul>

内联列表

class="list-inline"

，将竖直列表调整为水平布局，并且去掉项目符号（编号），保持水平展示。也可以认为内联列表是为了构建水平导航而设计的。 

<ul class="list-inline">
    <li>首页</li>
    <li>java学院</li>
    <li>在线课堂</li>
</ul>
水平定义列表 在原基础上添加了一些样式， 
class="dl-horizontal"
创建水平定义列表 : 当标题宽度超过160px时，将显示三个省略号。 
<dl class="dl-horizontal">
    <dt>HTML 超文本标记语言</dt>
    <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>
</dl>
代码 BootStrap提供了三种主要的代码风格： （1）使用 
<code></code>
来展示单行内联代码 （2）使用 
<pre></pre>
来展示多行块代码 （3）使用 
<kbd></kbd>
来展示用户输入代码,例如快捷键 单行内联代码 
<code>this is a simple code</code>
快捷键 
<p>使用<kbd>ctrl+s</kbd>保存</p>
多行块代码 代码会保留原有的格式，包括空格和换行 显示HTML代码需要使用字符实体 当长度超出设定值时，可以添加滚动条： 
pre-scrollable
<pre>
public class HelloWorld {
    public static void main(String[] args){
        System.out.println("helloworld...");
    }
}
</pre>

<pre class="pre-scrollable">
    ...长代码...
</pre>
表格 表格样式 Bootstrap为表格提供了基础样式及四种附加样式，并支持响应式表格。在使用Bootstrap的表格功能时，只需添加相应的类名即可获得不同的风格。 
<table class="table table-bordered table-striped table-hover table-condensed">
    <tr class="info">
        <th>JavaSE</th>
        <th>数据库</th>
        <th>JavaScript</th>
    </tr>
    <tr class="success">
        <td>面向对象</td>
        <td>oracle</td>
        <td>json</td>
    </tr>
</table>
表格样式类 
.table
：基本表格 
.table-striped
：斑马条纹表格 
.table-bordered
：带边框表格 
.table-hover
：鼠标悬停高亮显示 
.table-condensed
：紧凑型表格，单元格内间距较小 行状态类 
.active
：将悬停颜色应用于行或单元格上 
.success
：表示成功的操作 
.info
：表示信息变更的操作 
.warning
：表示警告的操作 
.danger
：表示危险的操作 表单 表单主要用于与用户的交互，合理的表单设计可以促进网页与用户之间的有效沟通。常见的表单元素包括文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。 表单控件 文本框 
.form-control
.input-lg（较大）
.input-sm（较小）
<input type="text" class="form-control">
<input type="text" class="form-control input-lg">
<input type="text" class="form-control input-sm">
下拉选择框 
.form-control
多行选项设置： 
multiple="multiple"
<select class="form-control">
    <option>北京</option>
    <option>上海</option>
</select>

<select class="form-control" multiple="multiple">
    <option>北京</option>
    <option>上海</option>
</select>
文本域 
.form-control
<textarea class="form-control" rows="3"></textarea>
复选框 竖直布局： 
.checkbox
水平布局： 
.checkbox-inline
<!-- 垂直显示 -->
<div class="checkbox">
    <label><input type="checkbox" name="hobby" />跳舞</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" name="hobby" />唱歌</label>
</div>

<!-- 水平显示 -->
<label class="checkbox-inline">
    <input type="checkbox" name="hobby" />跳舞
</label>
<label class="checkbox-inline">
    <input type="checkbox" name="hobby" />唱歌
</label>
单选按钮 竖直布局： 
.radio
水平布局： 
.radio-inline
<!-- 垂直显示 -->
<div class="radio">
    <label><input type="radio" name="sex" />男</label>
</div>
<div class="radio">
    <label><input type="radio" name="sex" />女</label>
</div>

<!-- 水平显示 -->
<label class="radio-inline">
    <input type="radio" name="sex">男
</label>
<label class="radio-inline">
    <input type="radio" name="sex">女
</label>
按钮 按钮样式 
<button class="btn btn-default">默认</button>
<button class="btn btn-primary">主要</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-info">信息</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-link">链接</button>
多标签支持 可将其他标签转换成按钮形式 
<a href="##" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
<div class="btn btn-warning">div标签按钮</div>
按钮大小 
<button class="btn btn-primary btn-xs">超小按钮</button>
<button class="btn btn-primary btn-sm">小型按钮</button>
<button class="btn btn-primary">正常按钮</button>
<button class="btn btn-primary btn-lg">大型按钮</button>
按钮禁用 方法1：在标签中加入disabled属性 
<!-- 真正禁用 -->
<button class="btn btn-danger" disabled="disabled">禁用按钮</button>
方法2：在元素标签中添加"disabled"类名 
<!-- 样式禁用 -->
<button class="btn btn-danger disabled">禁用按钮</button>
注：在class属性中添加"disabled"仅是样式上的禁用，并不会实际禁用该按钮！ 表单布局 基本的表单结构是Bootstrap自带的，特定的表单控件会自动接收一些全局样式。以下是创建基础表单的步骤： 向父元素 
<form>
添加 
role="form"
。 将标签和控件放在一个带有 
class ="form-group"
的 
<div>
中，这是实现最佳间距所需的。 给所有文本元素 
<input>
、 
<textarea>
和 
<select>
添加 
class="form-control"
。 水平表单 同一线条显示 
form-horizontal
结合Bootstrap框架的网格系统 
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="uname" class="control-label col-sm-2">姓名</label>
        <div class="col-sm-6">
            <input type="text" id="uname" class="form-control" placeholder="请输入姓名">
        </div>
    </div>
    <div class="form-group">
        <label for="upwd" class="control-label col-sm-2">密码</label>
        <div class="col-sm-6">
            <input type="password" id="upwd" class="form-control" placeholder="请输入密码">
        </div>
    </div>
</form>
内联表单 将所有控件都排在一行中显示 
form-inline
<form class="form-inline">
    <div class="form-group">
        <label for="userName">姓名</label>
        <input type="text" id="userName" class="form-control" placeholder="请输入姓名">
    </div>
    <div class="form-group">
        <label for="userPwd">密码</label>
        <input type="password" id="userPwd" class="form-control" placeholder="请输入密码">
    </div>
</form>
缩略图 缩略图常用于电商平台，尤其是在产品列表页面。其实现通常与网格系统配合使用。此外，还可以让缩略图搭配标题、描述内容和按钮等。 
<div class="col-md-3">
	<div class="thumbnail">
	    <img src="img/IMG_0131.jpg" alt="...">
	    <h3>高圆圆</h3>
	    <p>出生于北京市，中国内地影视女演员、模特。</p>
	    <button class="btn btn-default">
	        <span class="glyphicon glyphicon-heart"></span> 喜欢
	    </button>
	    <button class="btn btn-default">
	        <span class="glyphicon glyphicon-heart"></span> 评论
	    </button>
	</div>
</div>
面板 默认的.panel组件仅设置基本边框（border）和内补（padding）以包含内容。 
.panel-default
：基础样式 
.panel-heading
：面板头部 
.panel-body
：面板主体内容 
<div class="panel panel-success">
    <div class="panel-heading">
        ...面板头...
    </div>
    <div class="panel-body">
        ...面板内容...
    </div>
</div>
Bootstrap 插件 导航 1、基本样式: .nav 与 "nav-tabs"、“nav-pills”结合创建导航 2、类型: 标签型 ( 
nav-tabs
) 导航 胶囊形( 
nav-pills
) 导航 堆栈( 
nav-stacked
) 导航 自适应( 
nav-justified
) 导航 面包屑式( 
breadcrumb
) 导航 ，作为独立样式使用，不与nav组合，直接嵌入到ol、ul中，常用于导航以显示当前位置。 3、状态: 选中状态 active 样式 禁用状态: disable 4、二级菜单 标签型导航 
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">ios</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Python</a></li>
</ul>
胶囊型导航 
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">ios</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Python</a></li>
</ul>
面包屑导航 
<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">ios</a></li>
    <li class="active">十一月</li>
</ul>
分页导航 分页广泛存在于各类网站，分为页码导航和翻页导航 页码导航：在ul标签上添加 
pagination [pagination-lg | pagination-sm]
翻页导航：在ul标签上添加 
pager
页码导航 
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>
翻页导航 
<ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
</ul>
下拉菜单 使用Bootstrap框架的下拉菜单时，必须包括两个js文件 
<!-- 引入BootStrap的核心CSS文件 -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
基本结构 
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        喜欢频道 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">--- 科普 ---</li>
        <li><a href="#">人与自然</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">--- 搞笑 ---</li>
        <li class="active"><a href="#">欢乐喜剧人</a></li>
        <li class="disabled"><a href="#">生活大爆炸</a></li>
    </ul>
</div>
要点说明 使用带有类名 
dropdown
或 
btn-group
的

div
覆盖整个选择框；默认向下显示 
dropdown
，向上展开时则加入 
.dropup
即可实现 
<div class="dropdown">第2步</div>
使用按钮作为父级菜单，使用类名: 
dropdown-toggle
和自定义 
data-toggle="dropdown"
属性 
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">第3步</button>
在 
button
中运用 
span
创建下拉箭头 
<span class="caret"></span>
下拉菜单项采用一个 
ul
列表，并且定义类名为 
dropdown-menu
以表示下拉菜单 
<ul class="dropdown-menu">
    第5步
    第6步
</ul>
分组标题： 
<li>
添加类名 
dropdown-header
来实现分组功能 
<li class="dropdown-header"> 科普 </li>
<li><a href="#" target="_blank">人与自然</a></li>
<li><a href="#" target="_blank">生活大爆炸</a></li>
第6步
<li class="dropdown-header"> 搞笑 </li>
<li class="active"><a href="#" target="_blank">欢乐喜剧人</a></li>
<li class="disabled"><a href="#" target="_blank">快乐大本营</a></li>
分组分割线： 
<li>
添加类名 
divider
以添加下拉分隔线功能 
<li class="driver"></li>
对齐方式: 
dropdown-menu-left
左对齐 默认样式 
dropdown-menu-right
右对齐 激活状态（ 
.active
）和禁用状态（ 
.disabled
） 弹出框 弹出框（Modal）是覆盖在父窗口上的子窗口。通常，目的是展示来自一个独立来源的内容，可以在不离开父窗口的情况下进行一些互动。子窗口可提供信息、交互等。 操作弹出框 通过data 属性触发 在控制器元素（例如按钮或链接）上设置属性 
data-toggle="modal"
，同时设置 
data-target="#identifier"
或 
href="#identifier"
来指定要切换的特定弹出框（带有 
id="identifier"
）。 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">打开模态框</button>
JavaScript 控制 使用此技术，可以通过 JavaScript 调用带有 
id="identifier"
的弹出框： 
// 打开模态框
$('#myModal').modal('show');
// 关闭模态框
$('#myModal').modal('hide');
// 切换模态框
$('#myModal').modal('toggle');
<button class="btn btn-primary btn-lg" id="btn">打开模态框</button>

<script type="text/javascript">
    //绑定按钮的点击事件
    $("#btn").click(function(){
        //手动打开模态框
        $('#identifier').modal('show');
    });
</script>
弹出框结构 
<!--按钮触发模态框-->
....

<!--模态框（Modal）-->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">添加用户</h4>
            </div>
            <div class="modal-body">
                ...表单内容...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div>
    </div>
</div>
注意事项 在使用 Bootstrap 的 js 插件前必须先加载 jQuery 网格系统需用到 CSS：container、row、列类 数据行 (.row) 必须包含在容器 (.container) 内 只有列 (column) 才能作为行容器 (.row) 的直接子元素 列数总和不得超过平分的总列数（通常为12） 具体内容应放置在列容器 (column) 之内 响应式设计关键点 移动优先 使用媒体查询适应不同屏幕 通过网格系统实现灵活布局 组件会自动调整以适应不同的屏幕尺寸
二维码

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0
关键词：Bootstrap Bootstra boots 基础入门 boot

相关帖子

沙发
赵安豆 发表于 2025-11-19 14:27:05
### 安装和使用（续）

#### 文件结构

- **CSS**: 从 Bootstrap 的 `dist/css` 目录下，将 `bootstrap.min.css` 复制到你的项目的 CSS 文件夹中。这个最小化版本已经压缩过，适合生产环境。
- **JavaScript**: 同样地，从 `dist/js` 下复制 `bootstrap.min.js` 到项目 JS 文件夹。Bootstrap 的 JavaScript 插件依赖于 jQuery，所以确保先引入 jQuery。

#### 引入 Bootstrap

在 HTML 文件的 `<head>` 部分引入 CSS 和在 `<body>` 结尾部分引入 JS：

```html
<!-- 在 <head> 中 -->
<link rel="stylesheet" href="path/to/your/bootstrap.min.css">

<!-- 在 </body> 前 -->
<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.min.js"></script>
```

### 布局容器和栅格网格系统

#### 布局容器

Bootstrap 提供了两种布局容器：`.container` 和 `.container-fluid`。前者用于固定宽度的容器，而后者则为流式（全宽）容器。

```html
<div class="container">
  <!-- 此处内容在大屏幕下宽度是固定的 -->
</div>

<div class="container-fluid">
  <!-- 此处内容会填充整个屏幕宽度 -->
</div>
```

#### 栅格系统

Bootstrap 的栅格系统基于列，最多可以有12列。通过 `.row` 和 `.col-*-*` 类来创建行和列。

```html
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
</div>
```

### 常用样式

Bootstrap 包含大量预定义的 CSS 类，用于文本、颜色、按钮等。例如：

```html
<!-- 文本对齐 -->
<p class="text-center">居中显示文本</p>

<!-- 颜色类 -->
<span class="text-primary">主要信息</span>

<!-- 按钮样式 -->
<button type="button" class="btn btn-success">成功按钮</button>
```

### 表单

Bootstrap 支持多种表单布局，包括行内、垂直和水平布局。

```html
<form>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>
```

### Bootstrap 插件

Bootstrap 提供了多种 JavaScript 插件，如模态框、轮播图等。只需使用相应的数据属性即可激活。

```html
<!-- 模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  打开模态框
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
```

### 注意事项

- **JavaScript 和 CSS 文件的顺序**：确保 jQuery 在 Bootstrap 的 JS 之前加载。
- **自定义**: 可以使用 Less 或 Sass 来定制你自己的主题和样式。

### 响应式设计要点

Bootstrap 提供了多种响应式的类，例如 `.hidden-xs`、`.visible-lg` 等，这些可以帮助在不同设备上隐藏或显示内容。确保检查所有断点，使网站适应各种屏幕尺寸。

此文本由CAIE学术大模型生成，添加下方二维码，优先体验功能试用
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 我要注册

本版微信群
jg-xs1
拉您进交流群

京ICP备16021002号-2 京B2-20170662号 京公网安备 11010802022788号 论坛法律顾问：王进律师 知识产权保护声明   免责及隐私声明

GMT+8, 2025-12-5 15:22