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 <基础二十九>面板（Panels）

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

  7. Bootstrap <基础十九>分页

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

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

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

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

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

随机推荐

  1. NetworkComms V3 序列化器之Protobuf.net和 JSONSerializer

    NetworkComms v3版本中,默认使用的是protobuf.net序列化器. 即当您没有指定序列化的时候,系统自动使用默认的protobuf.net序列化器. 当然我们也可以自己指定序列化器 ...

  2. PHP代码审计基础

    php核心配置 php.ini 基本配置 语法 大小写敏感 运算符 空值的表达式 安全模式 安全模式 safe_mode = off 用来限制文档的存取,限制环境变量的存取,控制外部程序的执行.PHP ...

  3. apache2.2.25+tomcat7.0.47集群方案

    因为公司项目在线人数的增加,随着现在硬件成本越来越低,大多数的生产环境内存大多都已经达到 16G,尤其最新的阿里云,客户的机器都是配置超高的java主机,但是Java的运行环境,内存使用有限 ,这样就 ...

  4. C#基本语法1 ----> 实例

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. ///////////////////////////////////////////////////////////////////// ...

  5. 快速调通支付宝当面付Demo

    1.访问如下地址: https://auth.alipay.com/login/ant_sso_index.htm?goto=https%3A%2F%2Fopenhome.alipay.com%2Fp ...

  6. 清除浮动最有效的css写法

    说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好 ...

  7. [轉]Linux 2.6内核笔记【内存管理】

    4月14日 很多硬件的功能,物尽其用却未必好过软实现,Linux出于可移植性及其它原因,常常选择不去过分使用硬件特性. 比如 Linux只使用四个segment,分别是__USER_CS.__USER ...

  8. SQL中的DDL、DML、DCL、TCL

    1.DDL(Data Definition Language)数据库定义语言statements are used to define the database structure or schema ...

  9. android 样式和主题

  10. linux基础文件管理软硬链接

    一.文件系统的基本结构 1.文件和目录被组成一个单根倒置树目录结构 2.文件系统从根目录下开始,用“/”表示 3.根文件系统(rootfs):root filesystem文件名区分大小写 4.以 . ...