精华内容
参与话题
问答
  • 前端组件Bootstrap4(学习笔记一)

    万次阅读 2017-11-28 14:17:41
    Hello, 大家好,今天要分享的文章仍然是关于前端的,为什么迟迟没有关于Android相关的文章呢,其实这个公众号一开始,我就有明确的表示,它不仅仅局限于Android,我希望它可以博采众长,以Android为主,其它技术为辅...

    Hello, 大家好,今天要分享的文章仍然是关于前端的,为什么迟迟没有关于Android相关的文章呢,其实这个公众号一开始,我就有明确的表示,它不仅仅局限于Android,我希望它可以博采众长,以Android为主,其它技术为辅,夹杂一些社会百态,人生杂谈,虽然看起来没有主题,但我觉得,这便是主题,起码说不单一,不乏味,你说呢?


    当然,很长时间不发Android相关的文章最大的原因是:




    哈哈~,这是逗大家的,一个Gooogle为后台的语言,我相信它的未来肯定是前途无限,好了,来看今天的主题吧——Bootstrap4。


    Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集,对于它而言,是用于开发响应式布局、移动设备优先的 WEB 项目。


    具体的安装使用,我还是建议大家,使用cdn,还是那句话,不为别的,就是为了简单,使用cdn,具体地址如下:


    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


    如果你想下载,具体下载地址可以去官网下载:https://getbootstrap.com/


    好了,下载好之后,或者使用了cdn,那么我们就可以实现我们要实现的功能了,Bootstrap4具体实现,是要把所有的标签语言放到一个容器里,就和Vue.js一样,被一个盒子封住,Bootstrap4提供了两个class,一个是全屏,一个是非全屏:


    • 1、.container 类用于固定宽度并支持响应式布局的容器。


    • 2、.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。


    有了容器,那么我们就可以在容器里写标签了,这一篇文章就先从最简单的文字排版走起。


    大标题


    未接触Bootstrap4之前,我们所写的标题都是采用h系列,即h1到h6,可是这些标题有时候我们还感觉小怎么办,当然了我们可以使用font-zize,去改变字的大小,但是,有了Bootstrap4,我们只需要设置对应的class就ok了。


    <div class="container">
       <h1 class="display-1">我是最大的字体</h1>
       <h1 class="display-1">我是第二大的字体</h1>
       <h1 class="display-3">我是第三大的字体</h1>
       <h1 class="display-4">我是第四大的字体</h1>
    </div>



    这里需要解释一下,可能刚了解的人有些许疑问,为什么display只有1-4,如果大于或者小于,会怎么样,这个问题大家可以看下源码,Bootstrap4只有这四个尺码,大于或者小于只会显示标签的默认字号,比如,你用的是h1,那么就会显示h1的尺码,对于这个class,你可以用很多标签来使用它,并不仅仅局限于h1,h系列,p,span……等都可以的。


    <div class="container">
       <p class="display-1">我是最大的字体</p>
       <span class="display-1">我是第二大的字体</span>
       <div class="display-3">我是第三大的字体</div>
       <strong class="display-4">我是第四大的字体</strong>
       <!-- ………………等 -->
    </div>


    code代码


    有时候,我们会去刻意的显示,一个代码或者标签,这里我们就可以使用code标签:


    <div class="container">
     <code>p</code>标签代表的是一个段落<br/>
     <code>div</code>是一个容器<br/>
     <code>blockquote</code>是一个块级元素
    </div>




    文本样式(加粗,倾斜,对齐样式)


    关于加粗,倾斜,等文本样式,这里我列个表,方便大家查阅:


    类名 描述
    .font-weight-bold 加粗文本
    .font-weight-normal 普通文本
    .font-weight-light 更细的文本
    .font-italic 斜体文本
    .lead 让段落更突出
    .small 指定更小文本 (为父元素的 85% )
    .text-left 左对齐
    .text-center 居中
    .text-right 右对齐
    .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
    .text-nowrap 段落中超出屏幕部分不换行
    .text-lowercase 设定文本小写
    .text-uppercase 设定文本大写
    .text-capitalize 设定单词首字母大写
    .initialism 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母
    .list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
    .list-inline 将所有列表项放置同一行
    .pre-scrollable 使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条


    <div class="container">
    <p class="font-weight-bold">
        我是粗体字
    </p>
    <p class="font-weight-normal">
           我是普通文本
    </p>
    <p class="font-weight-light">
           我是更细的文本
    </p>
    <p class="font-italic">
           我是斜体
    </p>
    <p class="text-left">
           我是居左的字体
    </p>
    <p class="text-center">
           我是居中的字体
    </p>
    <p class="text-right">
           我是居右的字体
    </p>
    </div>



    其它拓展(pre,kbd,abbr,mark ……)


    显示键盘快捷键,或者键盘,那么就可以使用kbd:


    <div class="container">
       <kbd>command+d</kbd><br/>
       <kbd>control+s</kbd><br/>
       <kbd>control+alt+shift</kbd><br/>
    </div>




    我想着pre在这里就不要多言了吧,毕竟它和html中的pre是一样的,作用就是显示原有的样式,下面我们看下,abbr和mark:


    <div class="container">
      <abbr title="让你看,你还真看啊">你把鼠标放到我身上就可以看到你想看到的</abbr><br/>
       <mark>我是自带光环的字体</mark>
    </div>



    总结:


    这一篇文章,是一个入门篇,主要是Bootstrap4的一些文本信息的用法,下一篇,我们就要进入,Bootstrap4用的最多的几个关键词,只要掌握了一种,那么其他的就会迎刃而解。

    展开全文
  • 阅读目录入门Bootstrap4安装下载方式引入软件包管理器内容预编译的引导程序CSS文件JS文件Bootstrap程序源代码浏览器和设备支持的浏览器移动设备桌面浏览器IE浏览器Javascript禁用数据属性API事件程序化API异步功能和...

    在这里插入图片描述

    Bootstrap是一个简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。是全球最流行的前端框架,用于构建响应式、移动设备优先的 WEB 站点。

    入门Bootstrap4

    安装

    下载方式引入

    • 方式一: 下载源码文件引入到项目页面
      通过下载 Bootstrap 的 Sass、JavaScript 和文档的源文件,使用你自己的流程工具编译 Bootstrap。下载源文件
    • 方式二: 预编译的 CSS 和 JS 文件
      下载 Bootstrap v4.5.0 版本的预编译文件,加入到项目中。下载 Bootstrap
    • 方式三: BootstrapCDN
      使用 BootstrapCDN 从而无需下载,将 Bootstrap 的预编译 CSS 和 JS 文件利用缓存加载到项目中。
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    

    注意: 编译过的 JavaScript,不要忘记在它之前引入 jQuery 和 Popper.js 的 CDN 版本

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    

    软件包管理器

    使用一些最受欢迎的软件包管理器,几乎可以将Bootstrap的源文件拖入任何项目中。无论软件包管理器是什么,Bootstrap都将需要Sass编译器和Autoprefixer来进行与我们官方编译版本匹配的设置。

    • npm
      利用 npm 将 Bootstrap 安装到 Node.js 应用程序中:
    npm install bootstrap
    
    • yarn
      利用 yarn 将 Bootstrap 安装到 Node.js 应用程序中:
    yarn add bootstrap
    
    • RubyGems
      将以下代码添加到你的 Gemfile 文件中,然后利用 Bundler (推荐) 和 RubyGems 工具将 Bootstrap 安装到你的 Ruby 应用程序中:
    $ gem 'bootstrap', '~> 4.5.0'
    
    //不使用 Bundler,你还可以通过以下命令安装 Bootstrap 的 gem:
    $ gem install bootstrap -v 4.5.0
    
    • Composer
      你还可以利用 Composer 安装和管理 Bootstrap 的 Sass 和 JavaScript 文件:
    composer require twbs/bootstrap:4.5.0
    
    • NuGet
      如果你是 .NET 开发者,你还可以利用 NuGet 来安装和管理 Bootstrap 的 CSS 或 Sass 和 JavaScript 文件:
    Install-Package bootstrap
    Install-Package bootstrap.sass
    

    内容

    Bootstrap中包含的内容,包括预编译和源代码版本。注意,Bootstrap的JavaScript插件需要jQuery。

    预编译的引导程序

    下载后,解压缩压缩文件夹,有以下内容:

    bootstrap/
    ├── css/
    │ ├── bootstrap-grid.css
    │ ├── bootstrap-grid.css.map
    │ ├── bootstrap-grid.min.css
    │ ├── bootstrap-grid.min.css.map
    │ ├── bootstrap-reboot.css
    │ ├── bootstrap-reboot.css.map
    │ ├── bootstrap-reboot.min.css
    │ ├── bootstrap-reboot.min.css.map
    │ ├── bootstrap.css
    │ ├── bootstrap.css.map
    │ ├── bootstrap.min.css
    │ └── bootstrap.min.css.map
    └── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

    已编译的CSS和JS(bootstrap.),以及已编译和精简的CSS和JS(bootstrap.min.)。
    源映射(bootstrap.*.map)可用于某些浏览器的开发人员工具。
    捆绑的JS文件(bootstrap.bundle.js最小化bootstrap.bundle.min.js)包括Popper,但不包括jQuery。

    CSS文件

    css文件包含的内容如下:
    在这里插入图片描述

    JS文件

    在这里插入图片描述

    Bootstrap程序源代码

    Bootstrap源代码下载包括预编译的CSS和JavaScript资产,以及源Sass,JavaScript和文档。更具体地说,它包括以下内容和更多内容:

    bootstrap/
    ├── dist/
    │ ├── css/
    │ └── js/
    ├── site/
    │ └──docs/
    │ └── 4.5/
    │ └── examples/
    ├── js/
    └── scss/

    浏览器和设备

    支持的浏览器

    Bootstrap支持所有主要浏览器和平台的最新,稳定版本。在Windows上,支持Internet Explorer 10-11 / Microsoft Edge。
    不明确支持直接或通过平台的Web视图API使用最新版本的WebKit,Blink或Gecko的替代浏览器。但是,Bootstrap应该(在大多数情况下)也可以在这些浏览器中显示并正常运行。下面提供了更具体的支持信息。

    https://github.com/browserslist/browserslist#readme
    >= 1%
    last 1 major version
    not dead
    Chrome >= 45
    Firefox >= 38
    Edge >= 12
    Explorer >= 10
    iOS >= 9
    Safari >= 9
    Android >= 4.4
    Opera >= 30

    移动设备

    一般来说,Bootstrap支持每个主要平台的默认浏览器的最新版本。
    注意:不支持代理浏览器(例如Opera Mini,Opera Mobile的Turbo模式,UC迷你浏览器,Amazon Silk)。详情如下:
    在这里插入图片描述

    桌面浏览器

    同样,支持大多数桌面浏览器的最新版本。详情如下:
    在这里插入图片描述

    IE浏览器

    支持Internet Explorer 10+;IE9和向下不是。
    注意: 某些CSS3属性和HTML5元素在IE10中不完全受支持,或者要求使用前缀属性才能具有全部功能。如果需要IE8-9支持,请使用Bootstrap 3。获取有关浏览器对CSS3和HTML5功能的支持的详细信息。…

    Javascript

    1. 借助基于jQuery构建的可选JavaScript插件,使Bootstrap栩栩如生

    2. 插件可以单独包含(使用Bootstrap的personal js/dist/.js),也可以同时使用bootstrap.js或缩小的插件bootstrap.min.js(不包括两者)。如果使用捆绑程序(Webpack,汇总…),则可以使用/js/dist/.jsUMD就绪的文件。

    3. 所有插件都依赖于jQuery(这意味着必须在插件文件之前包含jQuery )

    禁用数据属性API

    禁用数据属性API,需要取消绑定文档命名空间上的所有事件,data-api如下所示:

    $(document).off('.data-api')
    

    要定位特定的插件,只需将插件的名称作为名称空间以及data-api命名空间包括在内,如下所示:

    $(document).off('.alert.data-api')
    

    事件

    Bootstrap为大多数插件的唯一操作提供自定义事件。所有不定式事件均提供preventDefault()功能。这提供了在动作开始之前停止执行的能力。从事件处理程序返回false也会自动调用preventDefault()。

    $('#myModal').on('show.bs.modal', function (e) {
      if (!data) {
        return e.preventDefault() // stops modal from being shown
      }
    })
    

    程序化API

    通过JavaScript API使用所有Bootstrap插件。所有公共API都是单个可链接的方法,并返回所作用的集合。

    $('.btn.danger').button('toggle').addClass('fat')
    
    // 所有方法都应接受可选的options对象,以特定方法为目标的字符串或不包含任何内容(以默认行为启动插件):如下
    $('#myModal').modal() // initialized with defaults
    $('#myModal').modal({ keyboard: false }) // initialized with no keyboard
    $('#myModal').modal('show') // initializes and invokes show immediately
    

    每个插件还在Constructor属性上公开其原始构造函数$.fn.popover.Constructor。如果您想获取特定的插件实例,请直接从元素中检索它:$('[rel="popover"]').data('popover')

    异步功能和转换

    所有编程API方法都是异步的,并且在过渡开始之后但结束之前会返回给调用方。

    为了在转换完成后执行操作,您可以收听相应的事件。

    $('#myCollapse').on('shown.bs.collapse', function (e) {
      // Action to execute once the collapsible area is expanded
    })
    

    此外,将忽略对过渡组件的方法调用。

    $('#myCarousel').on('slid.bs.carousel', function (e) {
      $('#myCarousel').carousel('2') // 1完成后将滑向2
    })
    
    $('#myCarousel').carousel('1') // 
    $('#myCarousel').carousel('2') // 被忽视
    

    默认设置

    可以通过修改插件的Constructor.Default对象来更改插件的默认设置:

    $.fn.modal.Constructor.Default.keyboard = false
    

    主题化

    使用新的内置Sass变量自定义Bootstrap 4,以实现全局样式首选项,以方便主题化和组件更改。在Bootstrap 3中,主题化主要由LESS中的变量替代,自定义CSS和我们包含在dist文件中的单独主题样式表驱动。只要付出一些努力,就可以完全重新设计Bootstrap 3的外观,而无需触及核心文件。Bootstrap 4提供了一种熟悉但略有不同的方法。
    现在,主题化是通过Sass变量,Sass映射和自定义CSS来完成的。没有更多专用的主题样式表了。相反,我们可以启用内置主题以添加渐变,阴影等。

    Sass

    利用源Sass文件来利用变量,映射,mixins等。在Bootstrap的构建中,已将Sass舍入精度提高到6(默认为5),以防止浏览器舍入问题。

    将bootstrap4主要的了解一下,更多了解,bootstrap4官方文档…

    展开全文
  • Bootstrap4使用教程

    千次阅读 2018-11-15 16:48:50
    本篇文章写给那些第一次接触Bootstrap框架的学习者,这篇文章将从最基础最基础的Bootstrap下载开始。对Bootstrap有使用经验的同学可以忽略本篇文章。 Bootstrap下载 可以自行百度Bootstrap下载,也可以直接通过此...

    本篇文章写给那些第一次接触Bootstrap框架的学习者,这篇文章将从最基础最基础的Bootstrap下载开始。对Bootstrap有使用经验的同学可以忽略本篇文章。

    Bootstrap下载

    第一种方法:到bootstrap官网下载http://getbootstrap.com/
    第二种方法:bootstrap中文网下载http://www.bootcss.com/
    其实这两个方法都是差不多的,方法不重要,只要我们能够下载到我们需要的bootstrap文件就行了。截至到目前bootstrap的最新版本为bootstrap4.1.3,我们这里下载的是4.0版本。这里需要注意的是我们需要下载的是编译版并不是源码,所以下载的时候不要搞错了哦。
    下载之后我们把安装包解压,我们会看到很多文件,其实我们用到的只有里面3个,分别是bootstrap.min.css,bootstrap.min.js,bootstrap.bundle.min.js文件

    Bootstrap4使用

    bootstrap4.0下载之后,我们先来看一下怎么使用它。
    为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,我们需要在网页的 head 之中添加 viewport meta 标签。

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    

    width=device-width 表示宽度是设备屏幕的宽度。
    initial-scale=1 表示初始的缩放比例。
    shrink-to-fit=no 自动适应手机屏幕的宽度。
    下面我们还要再引入4个文件, bootstrap.min.css(Bootstrap4 核心 CSS 文件)、jquery.min.js(jQuery文件,必须在bootstrap.min.js 之前引入)popper.min.js(于弹窗、提示、下拉菜单等)、bootstrap.min.js(bootstrap的核心js文件)。

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <title>Bootstrap4使用</title>
      </head>
      <body>
        <h1>Bootstrap4使用</h1>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>
    

    可能会有同学会问,popper.min.js文件怎么找不到,其实这个和jQuery一样需要我们自行下载的,如果你的项目中没有用到弹窗、提示、下拉菜单等效果的话,不引入这个文件也是没有任何问题的。或者说你直接把bootstrap.min.js文件替换成bootstrap.bundle.min.js文件页可以,后者里面相当于集合了popper.min.js文件。
    还有js文件的引入最好放到body结束标签前,不要放在head标签里,至于原因我们后续再说。
    如果你不想下载bootstrap的话,你也可以通过CDN来引入bootstrap的必须文件来直接开发。
    下方是官网给出的CDN引入地址。

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    

    至于其中的integrity和crossorigin你只需要和CDN引入的安全性有关就行了。

    展开全文
  • bootstrap4.zip

    2020-08-02 13:17:35
    关于bootstrap4常用的js(bootstrap.bundle,bootstrap.bundle,popper,tether.min),css,font。方便大家下载使用。
  • bootstrap4后台模板

    2018-05-02 11:17:14
    五套bootstrap4响应式后台经典模板 五套bootstrap4响应式后台经典模板 五套bootstrap4响应式后台经典模板
  • 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,取决于个人。

    展开全文
  • bootstrap4 新特性

    千次阅读 2018-02-04 17:29:25
    从Less迁移到Sass: 现在,Bootstrap已加入Sass的大家庭中。得益于Libsass,Bootstrap的编译速度比以前更快; 改进网格系统:新增一个网格层适配移动设备,并整顿语义混合。 支持选择弹性盒模型(flexbox):这是项...
  • bootstrap4

    千次阅读 2019-02-25 11:17:13
    文章目录1.... 边框颜色4. 浮动5. 响应式浮动6. 对齐7. 宽度8. 高度3. 字体4. 颜色5. 导航6. 导航栏7. 下拉菜单8. 表单控件1. input2. textarea3. 复选框(checkbox)4. 单选框(Radio)5. select下拉菜单9...
  • 阅读目录入门Bootstrap4布局Container响应 & 反应灵敏响应断点内容页面默认值字体标题和段落列表预格式化文字Tables表格Forms表单鼠标效果其他元素HTML5 [hidden]属性版式全局设置标题自定义标题显示标题段落...
  • Bootstrap 4 – Responsive Web Design 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书...
  • Bootstrap3 与Bootstrap4垂直水平居中

    万次阅读 多人点赞 2018-07-03 15:58:42
    Bootstrap水平居中 // 文本: class ="text-center" // 图片居中: class = "center-block" //其他元素: //bootstrap3水平居中:利用bootstrap列偏移 class = "col-md-offset-4 col-lg-offset-4col-xl-...
  • Bootstrap3和Bootstrap4区别

    万次阅读 2018-10-26 18:24:11
    Bootstrap3和Bootstrap4区别 首先引入Bootstrap3和4官网连接; Bootstrap3 VS Bootstrap4. 不同点 Bootstrap3 Bootstrap4 Less Sass语言编写 4种栅格类 5种栅格类 使用px为单位 使用rem和em为单位(除...
  • Bootstrap4中使用垂直居中

    万次阅读 2018-06-18 11:05:56
    Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。...利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 ...Bootstrap4下载地址:&amp;gt;...
  • Bootstrap4 安装方式

    千次阅读 2019-05-13 17:20:40
    可以通过两种方式来安装 Bootstrap4: 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 一、Bootstrap4 CDN 库: 国内推荐使用 :https://www.staticfile.org/ <!-- 新 Bootstrap...
  • Bootstrap 4重大更新,亮点解读

    万次阅读 2018-01-19 17:11:12
    8月19日对Bootstrap来说是个特别的日子——不仅是项目四周年纪念日,也是经过了一年密集开发之后发布Bootstrap 4内测版的日子。Bootstrap 4是一次重大更新,几乎涉及每行代码。新增功能Bootstrap 4中有太多重大的...
  • Bootstrap4Bootstrap4 安装使用

    千次阅读 2017-12-27 15:18:35
    Bootstrap4 安装使用 我们可以通过以下两种方式来安装 Bootstrap4: 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 Bootstrap 4 CDN 国内推荐使用 BootCDN 上的库: ...
  • Bootstrap4使用gijgo的日期选择插件

    千次阅读 2019-11-05 16:19:07
    Bootstrap4中居然没有带日期选择的控件,蜜汁尴尬,好在找到了gijgo这个插件,bootcdn上也有支持,记录一下用法 CDN地址 https://www.bootcdn.cn/gijgo/ 效果演示 代码 全部使用bootcdn上的引入,注意需要额外引入中文...
  • Bootstrap 4 如何自定义表格列宽度

    万次阅读 2017-04-12 12:20:41
    今天我们要一起来看一下如何使用Bootstrap 4来自定义表格的列宽度。 注意,以下的示例会使用到row,col等一系列class来完成表格宽度的自定义,所以如果觉得麻烦,也可以直接自定义css,不过这就不属于我们的讨论...
  • Bootstrap4文件上传控件美化

    千次阅读 2020-01-09 16:40:09
    Bootstrap拯救了不太会html+css的我,同时Bootstrap也太方便了,但是,也有一点受限默认一些功能看不到了,今天用到文件上传控件,HTML默认的和Bootstrap4的自定义...Bootstrap4的自定义的,右端的“Browse”很碍眼...
  • Bootstrap3 和 Bootstrap4 的区别

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

空空如也

1 2 3 4 5 ... 20
收藏数 373,962
精华内容 149,584
关键字:

bootstrap4