您的位置:首页 > Web前端 > BootStrap

bootstrap框架的基本使用

2019-10-22 12:56 1041 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/weixin_45674894/article/details/102680395

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>
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: