Bootstrap 框架详解(bootstrap框架的理解)

编辑：rootadmin

Bootstrap 框架详解文章目录一、Bootstrap 简介二、安装及使用三、布局容器1.固定宽度2.百分百宽度四、栅格网格系统1.列组合2.列偏移3.列排序4.列嵌套5.根据分辨率自适应五、常用样式1.排版2.列表3.代码4.表格5.表单5.1 表单控件5.2 表单布局6.缩略图7.面板一、Bootstrap 简介

推荐整理分享Bootstrap 框架详解(bootstrap框架的理解)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:bootstrap4框架,bootstrap框架原理,bootstrap框架介绍,bootstrap框架介绍,bootstrap框架详细讲解,bootstrap3框架,bootstrap4框架,bootstrap框架详细讲解,内容如对您有帮助，希望把文章链接给更多的朋友！

框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。前端常用的框架有 Bootstrap、Vue、Angular、React 等，既能开发 PC 端，也能开发移动端。 Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。

二、安装及使用

Bootstrap 中文网站：www.bootcss.com

① 我们下载第二个，Bootstrap 源码

② 在项目中创建一个名为 bootstrap 的文件夹后面用于放 bootstrap 相关文件。

③ 下载完成后进行拷贝

拷贝 dist 文件夹中的 css 和 js，粘贴到我们刚刚创建好的 bootstrap 文件夹中，接着再拷贝 dist 文件夹下的 fonts，粘贴到 bootstrap//css 文件夹下，与 bootstrap.min.css 同级。

④ 创建一个 jquery.js 文件把它放到我们的项目文件夹 js 下。

⑤ 官网查找 jquery 代码官网地址：http://jquery.com/

点击 download：

选择第二行点击打开：我们可以看到代码行：

⑥ 复制以上所有代码

并粘贴到前面我们已经创建好的 jquery.js 文件内。

⑦ 外链引入文件

bootstrap.min.css 正常引入，但是 bootstrap.min.js 文件是依赖于 jquery 的，所以 jquery.js 必须在 bootstrap.min.js 之前引入。

三、布局容器1.固定宽度

.container 类是用于固定宽度并支持响应式布局的容器，两侧有留白。

<div class="container">...</div><!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.0"> <title>Document</title> <link href="css//bootstrap.min.css" rel="stylesheet"/> <style> .colors { background-color: black; color: aliceblue; height: 50px; margin-top: 50px; } </style></head><body> <div class="container colors"> OK! </div></body></html>

觉得原样式不满意我们可以再给 div

本文链接地址:https://www.jiuchutong.com/zhishi/295864.html 转载请保留说明！

上一篇：vue3【计算属性与监听-详】(vue使用计算属性)

下一篇：卡鲁拉国家公园里的小湖，爱沙尼亚 (© Sven Zacek/Minden Pictures)(卡拉公路)