前端（十九）—— Bootstrap框架

时间：2022-09-20 23:30:25

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 {

        width: 300px;

    }

    .row {

        width: 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/

前端（十九）—— Bootstrap框架的更多相关文章

  1. 实战web前端之：Bootstrap框架windows下安装与使用

    Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活.它基于HTML.CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应.Boots ...

  2. 前端基础 之 Bootstrap框架

    浏览目录 Bootstrap介绍 为什么要使用Bootstrap? Bootstrap环境搭建 布局容器 栅格系统 Bootstrap全局样式 一.Bootstrap介绍 Bootstrap是Twit ...

  3. 十九 Django框架，发送邮件

    全局配置settings.py EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' #发送邮件引擎 EMAIL_USE_TLS ...

  4. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十九】

    <Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  5. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  6. Bootstrap &lt&semi;基础二十九&gt&semi;面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  7. Bootstrap &lt&semi;基础十九&gt&semi;分页

    Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提 ...

  8. Bootstrap入门（二十九）JS插件6：弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  9. Bootstrap入门（十九）组件13：页头与缩略图

    Bootstrap入门(十九)组件13:页头与缩略 1.页头 2.默认的缩略图 3.自定义缩略图 页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔.它支持 h1 标签内内嵌 ...

随机推荐

  1. hdu1260 dp

    题意:有 k 个人需要买电影票,a[i] 表示第 i 个人单独买票要花费的时间,b[i] 表示第 i-1 个和第 i 个人一起买票需要花费的时间,问卖给所有人各一张票最少需要到什么时候. dp[i]表 ...

  2. iOS判断数组不为空

    用(［array count］＝＝0 )来判断是否为空,都是坑,如果array为空的话,执行count就会直接报错,程序崩溃退出. 正确判断NSArray是否为空的方法: if(array != ni ...

  3. Sonar&plus;Hudson&plus;Maven构建系列之三：安装Hudson

    摘要:其实前面介绍过Sonar,后面Hudson安装就方便了.安装Hudson之前说说Hudson相关的事,现在世面上的有两种与Hudson相关的CI工具,一个是Hudson,一个是Jenkins,这 ...

  4. C&plus;&plus; QUICK REFERENCE

    C++ string 用法详解 字符串分割(C++)  C++ QUICK REFERENCE Matt Mahoney, mmahoney@cs.fit.edu DECLARATIONS enum ...

  5. &lbrack;转&rsqb; C&num; 键盘中的按键对应的KeyValue

    原文C#KeyValue对应键盘 首先先看一下什么情况下需要对按键进行识别: KeyPress事件响应函数中,有KeyPressEventArgs, 对应于e.KeyChar; KeyDown事件响应 ...

  6. &lbrack;Andrew&rsqb;Ext&period;net Grid常用js

    var gridFunction= function (gridId) {                //获取当前Grid                var gridView = Ext.ge ...

  7. CentOS安装错误：no default or ui configuration

    靠,以后再也不用浏览器自带的下载工具下载镜像文件了,原来是下载的不完整,但是显示完全下载完毕了,真特么误导人.文件的checksum不对. references: https://www.centos ...

  8. HDU 2176 取&lpar;m堆&rpar;石子游戏（尼姆博奕）

    nim基础博弈 #include<stdio.h> #include<iostream> #include<cstring> #include<queue&g ...

  9. spring boot自定义starter

    1.spring boot 项目中自定义jar包 2.项目目录 3.src/main/java 下面写自己的方法,重点是 resources 下面的文件,在resources下面新建文件夹名字为 ME ...

  10. MySQL深入理解

    [存储引擎] InnoDB表引擎 默认事务型引擎,最重要最广泛的存储引擎,性能非常优秀. 数据存储在共享表空间,可以通过配置分开. 对主键查询的性能高于其他类型的存储引擎. 内部做了很多优化,从磁盘读 ...

相关文章