bootstrap框架的基本使用，bootstrap框架


bootstrap框架

Bootstrap ，来自 Twitter，是目前很受欢迎的前端框架,主要应用于响应式开发。
特点：

  • 组件简洁大方、代码规范精简、界面自定义性强。
  • Bootstrap是基于HTML5和CSS3开发的, js功能效果依赖于 jQuery
  • Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

版本：

  • 2.x.x 停止维护

    • 优点：兼容性好

    • 缺点：代码不够简洁、功能不够完善

      因为需要做兼容性处理，需要多写很多代码

  • 3.x.x 目前使用最多

    • 优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目
    • 缺点：放弃了IE67，对IE8支持但是界面效果不友好

  • 4.x.x 阶段 不太稳定

简单使用

说白了，bootstrap框架就是别人写好的代码，需要使用别人写好的css文件，只需要直接引入即可

  • 引入文件：<link rel="stylesheet" href="bootstrap/css/bootstrap.css">

  • bootstrap样式文件中有一些简单的样式初始化，所以引入之后不用再引入 base.css 文件

    但是bootstrap并没有将所有样式都重置，所有之后还需要自己手动写代码重置

  • 学习bootstrap框架说白了就是学习类（学习每一个类的含义）

    比如：pull-left——》左浮动、pull-right——》右浮动、clearfix——》清除浮动

bootstrap的布局容器

响应式布局容器（.container）

  • 设置了该类的盒子，在不同屏幕下有不同的版心，到了移动端宽度为100%

    底层原理：就是媒体查询
    点击了解媒体查询原理

  • 设置了该类的盒子，左右有默认15px的padding

    写框架的作者觉得内容直接贴两边不好看，就设置了左右15px的padding

流式布局容器（.container-fluid）点击了解流式布局套路

  • 设置了该类的盒子，宽度永远是100%
  • 设置了该类的盒子，左右也有默认15px的padding

抵消父元素padding的类（.row）

  • 设置了该类的子盒子，会抵消父元素左右15px的padding

    底层原理：通过margin为负值实现

基本模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 引入bootstrap的样式文件 -->
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
</head>
<body>

  <!-- bootstrap依赖于jquery,要先引入jquery -->
  <script src="./jquery/jquery-1.12.4.js"></script>
  <script src="./bootstrap/js/bootstrap.js"></script>
</body>
</html>

栅格系统的介绍(重点)

bootstrap中将一行分成了12份（12份更容易分配盒子的空间）

底层原理： 浮动（一行中显示） + 百分比（宽度均分） + 媒体查询（不同屏幕时才生效）

比如：.col-lg-6 表示在大屏及以上屏幕生效，盒子宽度为一行的6/12——》50%；浮动在一行中显示

语法：

.col-取值1-取值2
取值1 效果
lg 大屏及以上屏幕时生效
md 中屏及以上屏幕时生效
sm 小屏及以上屏幕时生效
xs 超小屏及以上屏幕生效（所有屏幕生效）

取值2： 份数（0~12）

表示在一行中的宽度占几份

举个例子:
如果是大屏幕设备, 每行放 6 个 div, 共两行
如果是中屏设备, 每行放 4 个 div, 共三行
如果是小屏设备, 每行放 3 个 div, 共四行
如果是超小屏设备, 每行放 2 个 div, 共六行

<div class="container">
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    <div class="item col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
  </div>

栅格系统的列偏移

  • 让子盒子往右平移设置margin-left即可，但是要求在不同屏幕下才会生效。需要配合媒体查询

  • 通过栅格系统中的列偏移类也可以完成。

    底层原理：也是设置百分比margin-left，并且配合媒体查询实现不同屏幕大小生效。

语法：

.col-取值1-offset-取值2
取值1 效果
lg 大屏及以上屏幕时生效
md 中屏及以上屏幕时生效
sm 小屏及以上屏幕时生效
xs 超小屏及以上屏幕生效（所有屏幕生效）

取值2： 份数（0~12）

表示该盒子往右偏移的份数

bootstrap全局样式阅读

排版：对齐

底层原理：就是一个text-align：left/center/right

类名
.text-left 文本左对齐
.text-center 文本居中对齐
.text-right 文本右对齐

表格：基本

类名 效果
.table 表格的基本样式（配合thead和tbody使用）
.table-striped 隔行变色
.table-bordered 边框
.table-hover 悬停变色

按钮：颜色

按钮需要加上基本类 .btn

类名 效果
.btn-danger 红色按钮
.btn-success 绿色按钮
.btn-primary 深蓝按钮
.btn-default 白色按钮
.btn-info 浅蓝按钮
.btn-warning 黄色按钮
.btn-link 链接按钮

按钮：尺寸

按钮默认是中按钮

类名 效果
.btn-lg 大按钮
.btn-sm 小按钮
.btn-xs 超小按钮

响应式工具介绍

在响应式布局中，有时候会设置不同屏幕下元素的显示或者隐藏

  • 使用bootstrap中预定的.hidden相关类实现

bootstrap中预定了一些类，可以控制盒子的显示或者隐藏

类名 效果
.hidden 所有屏幕都隐藏
.hidden-xs 只在超小屏隐藏
.hidden-sm 只在小屏隐藏
.hidden-md 只在中屏隐藏
.hidden-lg 只在大屏隐藏

组件介绍

组件比全局样式会多出一些功能出来，但是注意这些功能需要配合js文件一起使用

组件：字体图标

在bootstrap内部，内置了字体图标，只需要直接复制粘贴类名即可

比如：

<span class="glyphicon glyphicon-heart"></span>

具体需要什么组件可以去官网找,基本都能找到

如果需要导航条,bootstrap中已经写好导航条的代码，使用的时候直接复制粘贴即可

注意点：

  • 如果需要实现组件中如导航条的功能，需要引入bootstrap中的js文件才行
  • bootstrap中的js需要依赖与jquery这个js文件的，所以需要一起引入jquery这个js文件才能生效！
  • js文件通过script的src属性引入
<script src="./jquery/jquery-1.12.4.js"></script>
<script src="./bootstrap/js/bootstrap.js"></script>
文章最后发布于: 2019-10-23 15:12:36

相关内容

    暂无相关文章