Bootstrap（一）栅格系统

最新推荐文章于 2023-10-20 22:53:02 发布

We_jia

最新推荐文章于 2023-10-20 22:53:02 发布

阅读量477

点赞数

分类专栏： bootstrap 文章标签： bootstrap栅格系统

本文链接：https://blog.csdn.net/We_jia/article/details/88558718

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Bootstrap 简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

优点：响应式设计，Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

Bootstrap 优点

（1）Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

（2）预处理脚本：虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。

（3）一个框架、多种设备：你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。

（4）Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带栅格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

准备工作

下载Bootstrap框架核心文件。
下载jQuery文件。
下载HTML5兼容IE的JS插件。

HTML结构

1、Bootstrap框架的文档必须声明为HTML5文件类型，所以你的每一个页面都必须按照下面的格式进行设置：

<!DOCTYPE html>
<html lang="en">
......
</html>

2.添加HTML文档meta标记：

 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum=1.0,user-scalable=no">

3.引入所需要的核心文件，包括Bootstrap的CSS文件，jQuery插件，Bootstrap的JS核心文件，以及HTML5.JS文件。


    <link rel="stylesheet" href="./css/bootstrap.css"/>
   
    <script src="js/Less.js"></script>

<!-- jQuery文件，必须在bootstrap.min.js之前引入 -->

    <script src="js/jquery-1.9.1.js"></script>

 <!-- Bootstrap 核心 javascript文件-->
    <script src="js/bootstrap.js"></script>

总结：Bootstrap主页制作可以分为三个步骤

使用HTML5基本文档类型，并写好网站声明。
引入必须的Bootstrap核心文件。
将页面代码放入container类容器中

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器和.container-fluid容器

.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

注意：由于 padding 等属性的原因，这两种容器类不能互相嵌套。

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

<div class="container">
    <div class="row">   <!--抵消槽宽-->
        <div class="colume col-lg-12 col-md-12 col-sm-12 col-xs-12">col-lg-12 col-md-12 col-sm-12 col-xs-12</div>
    </div>
    <div class="row">
        <div class="colume col-lg-5 col-md-5 col-sm-5 col-xs-5">col-lg-5 col-md-5 col-sm-5 </div>
        <div class="colume col-lg-7 col-md-7 col-sm-7 col-xs-7">col-lg-7 col-md-7 col-sm-7  col-xs-7</div>
    </div>

    <div class="row">
        <div class="colume col-lg-4 col-md-4 "> col-lg-4</div>
        <div class="colume  col-lg-push-4  col-lg-4 col-md-4 "> col-lg-4</div>
    </div>

    <div class="row">
        <div class="colume col-lg-4 col-md-4 "> col-lg-4</div>
        <div class="colume  col-lg-offset-4  col-lg-4 col-md-4 "> col-lg-4</div>
    </div>

    <div class="row">
        <div class="colume  col-lg-4 col-md-4 ">hh</div>
        <div class="colume col-lg-pull-2 col-lg-4 col-md-4 "> col-lg-4</div>
    </div>
</div>

We_jia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap（一）栅格系统

Bootstrap 简介Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。优点：响应式设计，Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。Bootstrap 优点（1）Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有...
复制链接

扫一扫

专栏目录