湖北长城建设实业有限公司网站,如何新建一个网站,免费咨询在线,嵌入式软件开发是什么专业一、Bootstrap 简介
Bootstrap 是一个开源的前端框架#xff0c;由 Twitter 开发#xff0c;旨在快速开发响应式、移动优先的 Web 页面。它包含 HTML、CSS 和 JavaScript 组件#xff0c;如按钮、导航栏、表单等。 二、Bootstrap 安装方式
2.1 使用 CDN#xff08;推荐入…一、Bootstrap 简介
Bootstrap 是一个开源的前端框架由 Twitter 开发旨在快速开发响应式、移动优先的 Web 页面。它包含 HTML、CSS 和 JavaScript 组件如按钮、导航栏、表单等。 二、Bootstrap 安装方式
2.1 使用 CDN推荐入门
无需下载任何文件直接在 HTML 中引入 CDN 链接
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleBootstrap 示例/titlelink hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.3/dist/css/bootstrap.min.css relstylesheet
/head
bodyh1 classtext-center text-primaryHello, Bootstrap!/h1script srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.3/dist/js/bootstrap.bundle.min.js/script
/body
/html2.2 本地安装
方法一官网下载
访问官网https://getbootstrap.com/点击下载 → 选择 Compiled CSS and JS解压后包含 bootstrap.min.cssbootstrap.bundle.min.js
将文件放入项目中并在 HTML 中引用
link relstylesheet hrefcss/bootstrap.min.css
script srcjs/bootstrap.bundle.min.js/script方法二使用 npm 安装
npm install bootstrap三、基础使用示例
3.1 栅格系统Grid
div classcontainerdiv classrowdiv classcol-md-6 bg-info左侧/divdiv classcol-md-6 bg-warning右侧/div/div
/div3.2 按钮
button classbtn btn-primary主要按钮/button
button classbtn btn-secondary次要按钮/button3.3 表单
formdiv classmb-3label classform-label邮箱地址/labelinput typeemail classform-control placeholder输入邮箱/div
/form四、Bootstrap 样式类常见分类
分类示例类名颜色类text-primary、bg-success排版类text-center、fw-bold间距类m-3、p-2、mt-5边框类border、rounded显示控制类d-none、d-flex 五、响应式设计
Bootstrap 默认响应式布局支持断点类
col-sm-6小屏及以上col-md-6中等屏及以上col-lg-6大屏及以上col-xl-6超大屏
示例
div classrowdiv classcol-sm-12 col-md-6左/divdiv classcol-sm-12 col-md-6右/div
/div六、常见问题
Q1: 样式不生效
检查是否正确引入了 Bootstrap 的 CSS 和 JS 文件如果使用组件如下拉菜单JS 也必须正确引入
Q2: 自定义样式覆盖 Bootstrap
使用自定义类名或在 Bootstrap 引入之后单独引入自定义样式 七、学习资源推荐
Bootstrap 官方文档Bootstrap 中文网菜鸟教程 Bootstrap 教程 本文由“小奇Java面试”原创发布转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读回复【资料】获取福利回复【项目】获取项目源码回复【简历模板】获取简历模板回复【学习路线图】获取学习路线图。
