Bootstrap3布局实战：从基础到详解

190 浏览量更新于2024-09-04 收藏 349KB PDF 举报

"Bootstrap基本布局实现方法详解" Bootstrap是一款流行的前端框架，它提供了丰富的组件和预定义的CSS样式，便于快速构建响应式、移动设备优先的网页。本文将深入讲解如何利用Bootstrap实现基本的布局。首先，创建一个基本的Bootstrap页面。在开始之前，确保你已经安装了Sublime Text编辑器，并安装了Emmet插件，这将帮助你快速生成HTML结构。创建一个新的文件，通过快捷键Ctrl+N新建，然后Ctrl+S保存为`index.html`。在文件中输入`html:5`并按Tab键，自动生成HTML5的基本结构： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body></body> </html> ``` 接下来，我们需要引入Bootstrap的文件。在你的项目目录下创建一个`css`文件夹，然后在其中创建一个名为`bootstrap`的子文件夹。从Bootstrap的官方网站下载最新版本的Bootstrap包，解压后找到`dist`文件夹，包含`css`、`font`和`js`子文件夹，将这三个子文件夹复制到`css/bootstrap`文件夹内。为了应用Bootstrap样式，需要在HTML的`<head>`部分添加样式引用。确保引用路径正确，例如： ```html <link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"> ``` `bootstrap.min.css`包含了Bootstrap的所有核心样式，而`bootstrap-theme.min.css`则用于定义主题样式。此外，Bootstrap依赖于jQuery库，因此需要下载jQuery并引入到页面中。同样，将jQuery库（通常为`jquery.min.js`）放置在合适的位置，比如创建一个`js`文件夹，然后在`<body>`标签底部添加脚本引用，确保在Bootstrap的脚本之前引入： ```html <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="css/bootstrap/js/bootstrap.min.js"></script> ``` Bootstrap的核心布局组件主要包括网格系统、容器和行(row)。网格系统是Bootstrap布局的基础，它允许你创建响应式的列(column)布局。例如，创建一个12列的网格，可以这样写： ```html <div class="container"> <div class="row"> <div class="col-sm-4">Column 1</div> <div class="col-sm-4">Column 2</div> <div class="col-sm-4">Column 3</div> </div> </div> ``` 这里，`.container`提供了一个可调整宽度的容器，`.row`定义了一行，`.col-sm-4`表示每个列占据12列中的4列，适应于小屏幕设备(sm)。 Bootstrap还提供了多种预定义的类，如`.container-fluid`用于创建全宽容器，`.pull-left`和`.pull-right`用于浮动元素，`.center-block`用于居中显示元素等。另外，Bootstrap的栅格系统支持响应式断点，如`.col-md-`, `.col-lg-`分别对应中等和大屏幕设备的列宽。 Bootstrap提供了一套强大的工具，使得开发者能够轻松地构建美观、响应式的网站。了解并掌握其基本布局和组件，能极大地提高开发效率。通过实践和查阅官方文档，你可以进一步探索Bootstrap的高级特性，如导航条、模态框、下拉菜单等，从而在实际项目中更加得心应手。

Bootstrap基本布局实现方法详解基本布局实现方法详解

主要为大家详细介绍了Bootstrap基本布局实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，重新使用 Bootstrap3 实现一下，将涉及的内容也尽可能详细说

明。

1. 创建基本的页面创建基本的页面

我们先创建一个基本的 HTML 模板页面，使用 sublime + emmet 可以直接创建这个页面。

1.1 新建一个文件， Ctrl + N

1.2 保存到页面文件中，Ctrl + S，命名为 index.html

1.3 在这个空白页面中，输入 html:5，然后直接按制表键 Tab，就应该可以看到一个基本的 HTML5 模板页面了。

1.4 再次保存，按 Ctrl + S.

页面内容应该如下：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

2. 添加添加 Bootstrap 文件引用文件引用

在 index.html 文件所在的文件夹中，创建 css 文件夹，用来保存所有的样式文件，在 css 子文件夹中创建一个名为 bootstrap

的文件夹，用来保存我们的 bootstrap 文件。

从 bootstrap 官网可以下载到 bootstrap 的包，其中有一个 dist 的文件夹，这个文件夹中包含了三个子文件夹：css, font 和

js。将这三个子文件夹复制到你的 css/bootstrap 文件夹中。

在页面中会涉及两部分内容，样式和脚本。

2.1 添加样式引用添加样式引用

在 header 中添加 bootstrap 的样式引用。注意路径。

bootstrap.min.css 是 bootstrap 的样式文件，包含了所有的 bootstrap 样式定义，bootstrap-theme.min.css 则是主题定义。

2.2 添加脚本引用添加脚本引用

由于 bootstrap 使用了 jQuery 的脚本，所以，你还需要下载 jquery 脚本库。

在你的 index.html 文件所在目录中，创建一个名为 lib 的子目录，用来保存以后使用的脚本库，将下载得到的 jquery.min.js 复

制到这个目录中。

在紧邻你的 </body> 之间添加 jquery 和 bootstrap 脚本库引用。

</body>

3. 添加添加 bootstrap 容器容器

bootstrap的 .container 类是非常有用的，它能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。

container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。twitter bootstrap的 container类的优点在

于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以使用。

.container-fluid 则是一个全宽的容器，使用整个宽度。

.container {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

下载后可阅读完整内容，剩余5页未读，立即下载

普通网友

粉丝: 8
资源:
935

Bootstrap3布局实战：从基础到详解

Bootstrap 网格系统布局详解

第七篇Bootstrap表单布局实例代码详解(三种表单布局)

JS组件Bootstrap Table布局详解

Bootstrap Table布局详解：实现基础、条纹与边框效果

Bootstrap布局之栅格系统详解

Bootstrap布局方式详解

BootStrap前端框架使用方法详解

Bootstrap表单控件使用方法详解

bootstrap输入框组件使用方法详解

JS组件Bootstrap导航条使用方法详解

最新资源