zoukankan      html  css  js  c++  java

  • 前端（十九）—— Bootstrap框架

    Bootstrap

    Bootstrap中文文档

    一、简介

    • Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
    • Bootstrap框架是基于jQuery的，在导入bootstrap框架的js时应先导入jQuery
    • 通过制定的页面(html)架构，采用特定的css类名，快速获取页面样式，结合指定的全局属性，达到预期的js效果
    • 通过指定类名也可以完成字体图标

    二、安装与使用

    1、本地链接

    官网下载

    <!-- 链接本地的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

<!-- 链接本地的 Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    2、CDN(练习可用，链接可能会变动，需要更新)

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    3、bootstrap的简单使用

    <head>
    <meta charset="UTF-8">
    <title>bs的简单使用</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style type="text/css">
    .z-btn {
         300px;
    }

    .row {
         100vw;
    }
    </style>
</head>

<body>
    <!-- row类名在bootstrap中已经写好样式，在链接过css样式后可以直接使用改类名实现css样式 -->
    <div class="row">
        <div class="btn btn-warning col-md-6 col-md-offset-3 z-btn">按钮</div>
    </div>
    <div class="row">
        <div class="btn btn-warning z-btn center-block">按钮</div>
    </div>

	<span class="caret"></span>
	
    <div class="dropup">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            列表
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
            <li><a href="#">oldboy</a></li>
        </ul>
    </div>

</body>
<script src="bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>

    三、布局容器

    • 固定宽度：.container -- 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示
    • 流式布局：.container-fluid -- 页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变
    <head>
   </head><link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"> 
</head>
<body>
    <!-- 固定宽度容器: 固定值 -->
    <div class="container">
        <h1 class="bg-warning">固定宽度容器</h1>
    </div>
    <!-- 流式布局容器: 百分比 -->
    <div class="container-fluid">
        <h1 class="bg-warning">流式布局容器</h1>
    </div>
</body>
<script src="bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    四、响应式布局

    • 超小屏幕：小于 768px , -- xs
    • 小屏幕：大于等于 768px , -- sm
    • 中等屏幕：大于等于 992px , -- md
    • 大屏幕：大于等于 1200px , -- lg

    五、栅格系统

    1、概念

    将父级可用宽度(content)均分为12等份

    2、列比

    • 超小屏幕：.col-xs-* -- 超小屏幕（屏幕宽度 < 768px）时，占据父级可用宽度中 * 份
    • 小屏幕：.col-sm-* -- 小屏幕（屏幕宽度 >= 768px）时，占据父级可用宽度中的 * 份
    • 中等屏幕：.col-md-* -- 中等屏幕（屏幕宽度 >= 992px）时，占据父级可用宽度中的 * 份
    • 大屏幕：.col-lg-* -- 大屏幕（屏幕宽度 >= 1200px）时，占据父级可用宽度中的 * 份
    ps：只设置小屏列比会影响大屏列比；只设置大屏列比小屏时会撑满屏幕

    3、行

    <!-- 第一行，row在bootstrap中已经处理过清浮动 -->
<div class="row"></div>
...
<!-- 第n行 -->
<div class="row"></div>

    <div class="row">
    <!-- 当屏幕宽度为中等屏幕时，该div占据row中的3份 -->
    <div class="col-md-3">
        <div class="md-3-box"></div>
    </div>
    <!-- 当屏幕宽度为中等屏幕时，该div占据row中的6份 -->
    <div class="col-md-6 center">
        <div class="md-6-box"></div>
    </div>
    <!-- 当屏幕宽度为中等屏幕时，该div占据row中的3份;当屏幕宽度为小屏幕时，该div占据row中的2份 -->
    <div class="col-md-3 col-sm-2">
        <div class="md-3-box"></div>
    </div>
</div>

    4、列偏移

    • 超小屏幕：.col-xs-offset-*
    • 小屏幕：.col-sm-offset-*
    • 中等屏幕：.col-md-offset-*
    • 大屏幕：.col-lg-offset-*

    六、辅助类

    1、 情境背景色

    <p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

    2、快速浮动

    <div class="pull-left">...</div>
<div class="pull-right">...</div>

    3、快速清浮动

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

    4、显隐

    <div class="show">...</div>
<div class="hidden">...</div>

    七、字体图标

    字体图标汇总
    <i class="glyphicon glyphicon-*"></i>

    八、组件

    组件课参考：https://v3.bootcss.com/components/
  • 相关阅读:
    打印出从1到最大的n位十进制数
    排序算法--（二）
    排序算法 （-）
    两个栈实现一个队列
    C++ 模板类解析
    根据先序遍历中序遍历重建二叉树
    格式化时间
    用js实现冒泡排序
    接口和抽象类的区别
    解析json
  • 原文地址：https://www.cnblogs.com/linagcheng/p/9850181.html
Copyright © 2011-2022 走看看