bootstrap3_bootstrap3.3.7 - CSDN
  • bootstrap3

    2020-07-23 23:32:33
    基本结构Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。 CSSBootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及...
  • Bootstrap3(一)

    千次阅读 2018-07-13 11:05:23
    移动设备优先自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持所有的主流浏览器都支持 Bootstrap。 容易上手只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习...

    1.Bootstrap 简介

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTMLCSSJAVASCRIPT 的。

    • 移动设备优先自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
    • 浏览器支持所有的主流浏览器都支持 Bootstrap。
    • 容易上手只要您具备 HTMLCSS 的基础知识,您就可以开始学习 Bootstrap。
    • 响应式设计Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机.

    1.1 Bootstrap 包的内容

    • 基本结构Bootstrap 提供了一个带有网格系统链接样式背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
    • CSSBootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
    • 组件Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等
    • JavaScript 插件Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
    • 定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本.

    2.Bootstrap 网格系统

    Bootstrap 提供了一套响应式移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。

    响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。这里写图片描述

    2.1 Bootstrap 网格系统(Grid System)的工作原理

    网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:

    • 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
    • 使用来创建水平组
    • 内容应该放置在列内,且唯有列可以是行的直接子元素
    • 预定义的网格类,比如.row.col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
    • 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过.rows上的外边距(margin)取负,表示第一列和最后一列的行偏移。
    • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4

    2.2.媒体查询

    媒体查询是非常别致的”有条件的 CSS 规则”。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应的样式。

    Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用,用来创建 Bootstrap 网格系统中的关键的分界点阈值。

    /* 超小设备(手机,小于 768px) */
    /* Bootstrap 中默认情况下没有媒体查询 */
    
    /* 小型设备(平板电脑,768px 起) */
    @media (min-width: @screen-sm-min) { ... }
    
    /* 中型设备(台式电脑,992px 起) */
    @media (min-width: @screen-md-min) { ... }
    
    /* 大型设备(大台式电脑,1200px 起) */
    @media (min-width: @screen-lg-min) { ... }

    我们有时候也会在媒体查询代码中包含 max-width,从而将 CSS 的影响限制在更小范围的屏幕大小之内。

    @media (max-width: @screen-xs-max) { ... }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    @media (min-width: @screen-lg-min) { ... }

    媒体查询有两个部分,先是一个设备规范,然后是一个大小规则。在上面的案例中,设置了下列的规则:

    让我们来看下面这行代码:

    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

    对于所有带有 min-width: @screen-sm-min的设备,如果屏幕的宽度小于 @screen-sm-max,则会进行一些处理。

    2.3网格选项

    • 超小设备手机(<768px):.col-xs-
    • 小型设备平板电脑(≥768px):.col-sm-
    • 中型设备台式电脑(≥992px):.col-md-
    • 大型设备台式电脑(≥1200px):.col-lg-

    2.4 响应式的列重置

    我们在小设备浏览时无法确定网格显示的位置。

    为了解决这个问题,可以使用.clearfix class

    2.5 偏移列

    偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如,.col-xs-* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。

    为了在大屏幕显示器上使用偏移,请使用.col-md-offset-*类。这些类会把一个列的左外边距(margin)增加*列,其中*范围是从111

    2.6 嵌套列

    为了在内容中嵌套默认的网格,请添加一个新的.row,并在一个已有的 .col-md-*列内添加一组.col-md-*列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。

    2.7 列排序

    Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。

    您可以很轻易地改变带有 .col-md-push-*.col-md-pull-*类的内置网格列的顺序,其中*范围是从 1 到 11。

    在下面的实例中,我们有两列布局,左列很窄,作为侧边栏。我们将使用.col-md-push-*.col-md-pull-*类来互换这两列的顺序。

    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-8">
        </div>
    </div>
    重新排序,相对于左边距,push 和 pull
    <div class="row">
        <div class="col-md-4" col-md-push-8>
        </div>
        <div class="col-md-8" col-md-pull-4>
        </div>
    </div>
    展开全文
  • Bootstrap3学习(一)

    2019-05-26 15:31:10
    Bootstrap学习(一) Bootstrap,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的,本博客将从基础开始讲解,逐步学习。 步骤: 1.搭建Bootstrap环境,有以下两种方式可供参考: (1)通过...

    Bootstrap,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的,本博客将从基础开始讲解,逐步学习。
    参考链接:https://www.runoob.com/bootstrap/bootstrap-grid-system.html

    步骤:

    一.搭建Bootstrap环境,有以下两种方式可供参考:
    (1)通过下载对应的文件到本地通过相对路径引入
    (2)通过官网链接直接引入(该方法可以根据引入文件版本的更新来下载对应文件,但在运行过程中速度可能会受到网络影响)
    二.网格系统
    1.绘制网格

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>网格系统</title>
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
      <style>
            body{
                margin:30px;
      }
      .container{
                outline:1px solid black;
      }
      .col-md-1,.col-md-3,.col-md-9{
                outline:1px solid black;;
                padding: 10px;
      }
      </style>
      <script src="jquery-3.3.1.min.js"></script>
      <script src="bootstrap.min.js"></script>
    </head>
    <body>
     <div class="container">
          <div class="row">
              <div class="container">
                  <div class="row">
                      <div class="col-md-1">1</div>
                      <div class="col-md-1">2</div>
                      <div class="col-md-1">3</div>
                      <div class="col-md-1">4</div>
                      <div class="col-md-1">5</div>
                      <div class="col-md-1">6</div>
                      <div class="col-md-1">7</div>
                      <div class="col-md-1">8</div>
                      <div class="col-md-1">9</div>
                      <div class="col-md-1">10</div>
                      <div class="col-md-1">11</div>
                      <div class="col-md-1">12</div>
                      <div class="col-md-3">col-md-3</div>
                      <div class="col-md-9">col-md-9</div>
                </div>
          </div>
      </div>
    </div>
    </body>
    </html>
    

    效果如图:
    在这里插入图片描述
    2.网格系统的偏移列

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>网格偏移列</title>
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
      <style>
            body{
                margin:30px;
      }
      .container{
                outline:1px solid black;
      }
      .col-md-3{
                outline:1px solid black;;
                padding: 10px;
                background:orange;
      }
      .col-md-2{
                outline:1px solid black;;
                padding: 10px;
                background:pink;
      }
      </style>
      <script src="jquery-3.3.1.min.js"></script>
      <script src="bootstrap.min.js"></script>
    </head>
    <body>
     <div class="container">
          <div class="row">
                      <div class="col-md-3 col-md-offset-2">col-md-3</div>
                      <div class="col-md-3 col-md-offset-2">col-md-3</div>
                      <div class="col-md-2 col-md-pull-4">col-md-4</div>
                      <div class="col-md-2 col-md-offset-3">col-md-4</div>
                </div>
          </div>
    </body>
    </html>
    

    效果图:
    在这里插入图片描述
    col-md-2是设置宽度为2份的网格宽度 ,使用.col-md-offset-* 类向右偏移对应列数。要实现偏移还有两种方式:
    (1)col-md-pull偏移数值 //向左偏移
    (2)col-md-push-偏移数值 //向右偏移
    在网格系统系统中,列排序就是通过 .col-md-push-* 和 .col-md-pull-* 类来实现的。
    3.网格系统的嵌套列

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>网格嵌套</title>
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
      <style>
            body{
                margin:30px;
      }
      .container{
                outline:1px solid black;
      }
      .col-md-4,.col-md-8{
                outline:1px solid black;
                background:orange;
                height:40px;
      }
      .col-md-6{
                outline:1px solid black;;
                background:#9cff;
      }
      </style>
      <script src="jquery-3.3.1.min.js"></script>
      <script src="bootstrap.min.js"></script>
    </head>
    <body>
     <div class="container">
          <div class="row">
                      <div class="col-md-4 ">col-md-4</div>
                      <div class="col-md-8 ">col-md-8
              <div class="row">
                      <div class="col-md-6 ">col-md-6</div>
                      <div class="col-md-6 ">col-md-6</div>
                </div>
          </div>
    </div>
    </div>
    </body>
    </html>
    
    

    效果图:
    在这里插入图片描述
    至此,网格系统的简单学习完成。

    展开全文
  • bootstrapv3.zip

    2020-07-17 17:50:58
    bootstrap压缩包。内含js,css,font等文件。完美满足开发使用
  • BootStrap3 标签系列

    2019-11-21 21:34:41
    目录官方地址基类情境色整体代码 官方地址 https://v3.bootcss.com/components/#labels 基类 .label <span class="label label-default">New</span> 情境色 .label-primary ....label-...

    官方地址

    https://v3.bootcss.com/components/#labels

    基类

    .label

    <span class="label label-default">New</span>
    

    情境色

    • .label-primary
    • .label-success
    • .label-info
    • .label-warning
    • .label-danger
    <!-- 情境色 -->
    <p>
        <span class="label label-primary">Primary</span>
    </p>
    
    <p>
        <span class="label label-success">Success</span>
    </p>
    
    <p>
        <span class="label label-info">Info</span>
    </p>
    
    <p>
        <span class="label label-warning">Warning</span>
    </p>
    
    <p>
        <span class="label label-danger">Danger</span>
    </p>
    

    整体代码

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>22标签</title>
    
        <!-- Bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    
        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
        <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="">
    
    <pre class="pre-scrollable">
    
    
    </pre>
    
    <!-- 基本用法 -->
    <span class="label label-default">New</span>
    <!-- 情境色 -->
    <p>
        <span class="label label-primary">Primary</span>
    </p>
    
    <p>
        <span class="label label-success">Success</span>
    </p>
    
    <p>
        <span class="label label-info">Info</span>
    </p>
    
    <p>
        <span class="label label-warning">Warning</span>
    </p>
    
    <p>
        <span class="label label-danger">Danger</span>
    </p>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
    </html>
    
    
    展开全文
  • Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统, 可以随着设备或视口尺寸的大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的...

    一、背景介绍

    什么是栅格系统

    Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统, 可以随着设备或视口尺寸的大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

    当然也可以使用百分比,12列看作为100%,每一列为20%,就可以实现在一行扩展出5列的效果

     

    二、知识剖析

    网格选项

    bootstrap使用了五种栅格选项来形成栅格系统,适合不同尺寸的屏幕设备。

    col-xs-*超小屏幕 手机 (<768px) (在bootstrap4里面用col-)

    col-sm-*小屏幕 平板 (≥576px)

    col-md-*中等屏幕 桌面显示器(≥768px)

    col-lg-*中等屏幕 桌面显示器 (≥992px)

    col-xl- 超大桌面显示器(≥1200px) (只有bootstrap4里面有xl)

     

    工作原理

    .container实现固定的宽度并居中呈现,并和其它网格实现对齐 行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下), 每列都有水平的padding值,用于控制它们之间的间隔,同时在负边距的行上抵消,从而实现列中的所有内容在视觉上是左侧对齐的体验。

     

    三、常见问题

    bootstrap3和bootstrap4的区别

     

    四、解决方案

    bootstrap4它的源码是采用 Sass 语言编写的

    使用flex的布局方式

    全部使用了rem为单位(除了部分的margin和padding使用px)

    Bootstrap 4 共有5种栅格类,依次是特小(col-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)

    偏移列通过 offset- 类来设置,例如:.offset-md-4 是把.col-md-4 往右移了四列格。

    bootstrap3使用float的布局方式

    bootstrap3 共有4种栅格类,依次是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)

    bootstrap3里面使用push和pull向左和向右移动

     

    五、编码实战

     

    六、拓展思考

    container,row,col的关系

    .container类用于固定宽度并支持响应式布局的容器。 .row和.col类配合用于为其赋予合适的排列和内补。

     

    七、参考文献

    Boostrap中文手册

    Bootstrap 4 与 3 在栅格系统方面的区别

    Bootstrap4与3的区别

     

    八、更多讨论

    问 bootstrap3和bootstrap4有什么区别?

    答  bootstrap3和bootstrap4最大的区别就是4用的是flex布局,3用的是float浮动,bootstrap4的栅格类特小(col-),bootstrap3的栅格类特小(col-xs),bootstrap4新增加的栅格特大(col-xl-),bootstrap4用offset来移动,bootstrap3用push和pull向左和向右移动

    问 container,row,col有什么关系?他们的工作原理是什么?

    答  .container类用于固定宽度并支持响应式布局的容器。 .row和.col类配合用于为其赋予合适的排列和内补。

    工作原理

    .container实现固定的宽度并居中呈现,并和其它网格实现对齐 行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下), 每列都有水平的padding值,用于控制它们之间的间隔,同时在负边距的行上抵消,从而实现列中的所有内容在视觉上是左侧对齐的体验。

    问  应该使用bootstrap3还是bootstrap4?

    答 应该使用bootstrap3还是4,这个看个人,有的人觉得bootstrap3好用,有的人觉得bootstrap4好用,所以用3还是4,取决于个人。

    展开全文
  • Bootstrap3和Bootstrap4区别

    万次阅读 2018-10-26 18:24:11
    Bootstrap3和Bootstrap4区别 首先引入Bootstrap3和4官网连接; Bootstrap3 VS Bootstrap4. 不同点 Bootstrap3 Bootstrap4 Less Sass语言编写 4种栅格类 5种栅格类 使用px为单位 使用rem和em为单位(除...
  • 前言: 即使我们有了HTML+CSS+JavaScript,但是开发起来还是代码比较多的,... Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。由Twitter的Mark Otto和Jaco...
  • 基于Bootstrap3制作响应式布局网站(一)

    万次阅读 多人点赞 2015-05-17 19:57:56
    现在的上网设备十分多,每种设备的分辨率都不一样,传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局,而Bootstrap的出现使得网站开发更加简单快捷。Bootstrap是Twitter推出的一个用于前端开发的开源工具...
  • Bootstrap3 和 Bootstrap4 的区别

    千次阅读 2019-07-14 23:21:16
    Bootstrap3 Bootstrap4 Less预处理 Sass预处理 bootstrap3 共有4种栅格类,依次是: 特小(col-xs-) (<=768px) 小(col-sm-) (>=768px) 中(col-md-) (>=992px) ...
  • Bootstrap4与Bootstrap3不同

    千次阅读 2019-05-24 16:06:57
    Bootstrap4与Bootstrap3不同1:移动优先设置 Bootstrap4: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Bootstrap3: <meta name="viewport" content="width=...
  • Bootstrap3 与Bootstrap4垂直水平居中

    万次阅读 多人点赞 2019-05-27 17:06:46
    Bootstrap水平居中 // 文本: class ="text-center" // 图片居中: ...//bootstrap3水平居中:利用bootstrap列偏移 class = "col-md-offset-4 col-lg-offset-4col-xl-offset-4" // boots...
  • Bootstrap3 datetimepicker控件的使用

    万次阅读 热门讨论 2018-05-18 20:58:54
    Bootstrap3 日期+时间选择控件 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 缺点:  目前没有中文包,只有英文版 官网地址:http://eonasdan.github.io/bootstrap-datetimepicker/ git地址:...
  • Axure Bootstrap 3 组件

    千次下载 热门讨论 2020-07-22 23:34:36
    Axure Bootstrap 3 组件 支持axure7.x 版本。
  • github最值得收藏的Bootstrap3后台管理框架

    万次阅读 多人点赞 2017-09-26 15:34:07
    github上9款最值得收藏的bootstrap3后台管理平台html框架 AdminLTE、Gentelella Admin、Vali Admin、ModularAdmin、Metis、Ace、Light Bootstrap Dashboard、Material Dashboard、Clearmin
  • Bootstrap 3 如何设置图片居中对齐

    千次阅读 2018-09-12 14:59:01
    如果您使用的是Bootstrap 3中,您可能遇到这么一个问题,你可以使用.text-center对文字居中对齐,图片却无法居中对齐,要解决这个问题你可以需要做很多事件,比如在img外加个div,再通过图片宽高大小等做调整等。...
  • nakupanda开源作者封装了一个更强大、更灵活的模态框——bootstrap3-dialog
  • bootstrap3-dialog打开嵌套iframe窗口

    千次阅读 2018-06-30 10:01:16
    bootstrap3-dialog是一款第三方提示框插件,但是使用过程中感觉对打开新的远程页面不太友好,而打开表单嵌套在原页面中又显得代码非常臃肿,所以对bootstrap3-dialog进行二次封装,将新页面嵌套进dialog,形成全局...
  • Django有个bootstrap3插件,可以简化对bootstrap3的使用,github上有其的项目:https://github.com/dyve/django-bootstrap3 打开帮助可以看其具体使用方法: 安装插件 pip install django-bootstrap3 在项目...
  • Bootstrap 3兼容IE8浏览器

    千次阅读 2016-07-07 14:44:31
    看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说。有几个点大家要注意。 1、本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文件不能看到兼容效果。...3、本文主要针对Bootstrap3版本
1 2 3 4 5 ... 20
收藏数 322,634
精华内容 129,053
关键字:

bootstrap3