BootStrap简介与使用

最新推荐文章于 2024-07-07 02:58:35 发布

strong_yu

最新推荐文章于 2024-07-07 02:58:35 发布

阅读量4.6k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/strong_yu/article/details/77825080

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.BootStrap的简介

Bootstrap，是来自 Twitter的目前最受欢迎的响应式前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷

2.BootStrap的特点

(1)HTML5文档类型

BootStrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5的文档类型,在项目中的每个页面都要参照下面的格式设计

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

（2）移动设备优先

BootStrap3整个是支持移动设备的，为了确保适当的绘制和触屏缩放，需要在<head>中添加viewport元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1">

（3）排版与链接

Bootstrap 排版、链接样式设置了基本的全局样式，分别是：

为 body 元素设置 background-color: #fff;

使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数

为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

(4)布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套

.container类用于固定宽度并支持响应式布局的容器

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

<div class="container-fluid">
  ...
</div>

3.删格系统

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

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备

下面从实践中更好的学习BootStrap

HTML代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个BootStrap文件</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap.min.js"></script>
    <script src="jquery-migrate-1.4.1.min.js"></script>
    <style>
        .row{
            margin-top: 10px;
            margin-bottom: 0;
        }
        [class*="col-"]{
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: rgba(84,64,124,.15);
            border: 1px solid #dddddd;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
</div>
</body>
</html>

浏览器结果: