bootstrap 框架学习笔记

2023-11-13

 http://getbootstrap.com/在这个上面下载bootstrap

为什么使用 Bootstrap?

  • 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。

  • 浏览器支持:所有的主流浏览器都支持 Bootstrap。

    Internet Explorer Firefox Opera Google Chrome Safari

  • 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。

  • 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计

    响应式设计

  • 它为开发人员创建接口提供了一个简洁统一的解决方案。

  • 它包含了功能强大的内置组件,易于定制。

  • 它还提供了基于 Web 的定制。

  • 它是开源的。


less???????????????????????????????不懂是什么


<meta name="viewport" content="width=device-width, initial-scale=1.0">

在网页上添加这个,对移动设备友好。用下面这个好像更好

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

bootstrap有的浏览器不支持,不知道为啥要用bootstrap

Bootstrap 网格系统

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

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

  • 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。

  • 使用行来创建列的水平组。

  • 内容应该放置在列内,且唯有列可以是行的直接子元素。

  • 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

  • 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。

  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4

????为什么要这么复杂 网格没怎么懂

Bootstrap 代码

Bootstrap 允许您以两种方式显示代码:

  • 第一种是 <code> 标签。如果您想要内联显示代码,那么您应该使用 <code> 标签。

  • 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签。

内联和块 


Bootstrap 表格

加了一些样式而已 


    //插件什么的还没看,data和直接用的区别?

转载于:https://my.oschina.net/sunshinedog/blog/628488

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

bootstrap 框架学习笔记 的相关文章

随机推荐

  • 我的第一个Spring程序

    转自 我的第一个Spring程序 下文是笔者创建第一个Spring示例的方法分享 如下所示 步骤一 使用Eclispe创建一个Java项目 在 Eclipse 中创建一个简单的 Java 项目 依次单击 File gt New gt Jav
  • Python:运营自媒体,如何修改图片的MD5值

    目录 前言 获取所有图片 更改图片MD5值 生成exe可执行文件操作 主界面 线程代码 进度条代码 前言 在我们运营自媒体的时候 或多或少会用到别人的图片 但是某些自媒体平台会判断图片的MD5 如果MD5相同 会认为你抄袭 默认会降低你的权
  • 静态链接与动态链接

    文章目录 静态链接 动态链接 说起静态链接和动态链接 大家肯定都不陌生 静态链接与动态链接的差别顾名思义 动态链接使动态库中的函数在程序运行后 才被用到 而静态链接则在运行前 就将所需函数合并了 我们来看看两者在 Linux 下的定义 静态
  • 单片机毕设 基于物联网的智能衣柜系统设计

    文章目录 1 简介 2 绪论 2 1 课题背景与目的 3 系统设计 3 1 硬件系部分 3 2 软件部分 3 1 系统架构 3 2 硬件设计 3 3 软件设计 主程序介绍 按键扫描程序设计流程 DHT11 读取程序流程图 LCD12864
  • 使用python搭建一个简易的Web服务

    介绍 简单的说 web服务器就是机器上监听了本地的IP和端口的一个进程 当有客户的请求进来时 它会响应客户的请求并返回相应的信息 客户端和服务端之间的通信基于HTTP协议 客户端可以是浏览器或者任何支持HTTP的应用 我们平时访问网页或手机
  • 2021-06-29 ffmpeg临时记录

    我们将 H264 和 AAC 码流存储为MP4文件的时候 就需要在 MP4文件中增加两个流通道 一个存储Video H264 一个存储Audio AAC 假设H264和AAC只包含单个流通道 avformat new stream 即在 A
  • 21. 实战:多线程+xpath抓取大量菜价信息(四种方法)

    目录 前言 目的 思路 代码实现 多线程 xpath 1 抓取单个页面 2 创建线程池 3 保存到文件 运行效果 完整代码 举一反三 多进程 xpath 多线程 bs4 多进程 bs4 总结 前言 我们学习了多线程 多进程对于提高效率的方法
  • Qt 的一些心得(背景设置,圆角,半透明)

    一 背景刷成黑色 前景色设为白色 方法一 paltette方式 经测试 该方法不会影响到其他控件 推荐使用 QPalette bgpal palette bgpal setColor QPalette Background QColor 0
  • SpringBoot课程笔记

    黑马程序员SpringBoot2课程笔记 一 基础篇 略 二 运维实用篇 1 SpringBoot运行与部署 略 2 SpringBoot配置 2 1 临时属性配置 可以在启动Boot程序时添加临时属性改变配置 2 1 1 属性加载优先级
  • java 静态类的实例_java中类的静态成员和实例成员

    一 基本介绍 java中的静态成员包括静态方法和静态成员变量 静态成员都是由static修饰的 java中的实例成员包括实例方法和实例成员变量 实例成员都没有被static修饰 二 使用语法 关于使用静态成员和实例成员的具体语法规则如下 p
  • 关于指针运算的一道题

    目录 刚看到这道题的时候我也和大多数小白一样感到无从下手 但是在我写这篇博客的前几分钟开始我对这道题有了一点点的理解 所以我就想着趁热打铁 写一篇博客来记录一下我的想法 题目如下 画图 逐一解答 题一 cpp cpp 1 c 2 POINT
  • 苹果手机10秒解除锁屏_忘记苹果锁屏密码10秒解决 音量键选择wipedata/

    导读 谈到苹果 大家应该都不陌生 有人问忘记手机密码了怎么办 另外 还有朋友想问oppo忘记图案解锁怎么办 这到底怎么回事呢 其实锁屏密码是四位数密码呢 下面是小编精心为你们整理的忘记苹果锁屏密码10秒解决 欢迎大家一起来阅读 忘记苹果锁屏
  • Android 获取当前应用的版本号和当前系统的版本号

    1 获取当前程序版本名 我们可以在AndroidManifest xml中设置程序的版本号等 如android versionName 1 0 那如果想在代码中获取这个版本号呢 可以用如下方法 这些修改版本号时只需要修改AndroidMan
  • 离线安装mariadb

    离线安装mariadb 文章目录 离线安装mariadb 一 下载Rpm包 二 按顺序安装依赖 galera安装 安装mariadb相关 三 安全配置 四 配置权限 五 通过navicat测试 一 下载Rpm包 前往MariaDB官网选择所
  • 如何写好一篇高质量的IEEE/ACM Transaction级别的计算机科学论文?

    http www zhihu com question 22790506 answer 81787300 f3fb8ead20 ea27429f8cbe31fd9183a68ccb41caa7 from timeline isappinst
  • uni——传参出现问题[object Object],[object Object]

    案例说明 后台需要的参数样式 goods lists good id 5 num 11 good id 9 num 3 good id 10 num 34 按照此格式传参发现 解决办法 出现 object Object 的原因通常是因为在将
  • linux 端口转发 udp,Linux Socat TCP/UDP端口转发及使用

    socat是不支持端口段转发 只适用于单端口或者少量端口 如果需要大量端口考虑使用 iptables 或 haproxy haproxy 只能转发TCP Socat安装 Centos 系统 yum install y socat Debia
  • 2023新能源汽车行业薪酬报告

    导读 数据表明 虽然受疫情封控等多重不利因素影响 但新能源汽车产业依然活力强劲 2022年 新能源汽车产销数据分别为 705 8 万辆和 688 7 万辆 同比增长分别为 96 9 和 93 4 连续 8 年保持全球第一 此外 新能源汽车市
  • C语言考试题目(一)

    一 单项选择题 本大题共25小题 每题2分 共50分 1 C语言的源程序通常的扩展名是 A cpp B obj C exe D c 2 下列选项中 属于多行注释 A B C D 3 以下不合法的字符常量是 A ab B 2 C A D n
  • bootstrap 框架学习笔记

    2019独角兽企业重金招聘Python工程师标准 gt gt gt http getbootstrap com 在这个上面下载bootstrap 为什么使用 Bootstrap 移动设备优先 自 Bootstrap 3 起 框架包含了贯穿于