首页 > 其他分享 >使用bootstrap总结

使用bootstrap总结

时间:2023-08-25 11:35:34浏览次数:31  
标签:总结 md 自定义 bootstrap 栅格 使用 col css


bootstrap是个很不错的前端css框架,把很多按钮、表单、表格、图片css通用样式都写好了,而且浏览器兼容不需我们考虑


尤其是它的栅格系统很强大,在做响应式布局时候很有用,但是默认支持12列,一般也足够了,如果要自定义列,就要

它的less我没用过,网站性能优化里面有提尽量少用css表达式



<!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>Bootstrap 101 Template</title>


    <!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好,世界!</h1>
<div class="container-fluid">
 <div class="row">
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
 <div class="col-md-8">.col-md-8</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-6">.col-md-6</div>
 <div class="col-md-6">.col-md-6</div>
</div>
</div>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>




标签:总结,md,自定义,bootstrap,栅格,使用,col,css
From: https://blog.51cto.com/u_2148212/7228026

相关文章

  • php使用traits实现代码复用、多继承
    php只能继承一个父类,php5.4后新增traits实现代码复用机制变向达到多继承1、trait和类相似,但不能被实例化,无需继承,只需要在类中使用关键词use引入即可,可引入多个traits,用','隔开2、trait会覆盖继承的方法,当前类会覆盖trait方法<?phpclassPeople{ publicfunctionwalk(){ ech......
  • .NET6 使用AutoMapper
    一、Net6环境下的.netcore项目里如何使用AutoMapper实现依赖注入。注:AutoMapper是一个对象-对象映射器,可以将一个对象映射到另一个对象。第一步,在Nuget引入AutoMapper、AutoMapper.Extensions.DependencyInjection这两个NuGet包  第二步,定义Profile,方便......
  • VisionPro CogPMAlignTool图像匹配工具的使用详解
    PMAlign工具:此工具可用于训练模板,然后使用在连续的输入图像中搜索模板。可指定执行模板训练或模板搜索时要使用的算法类型,并可选择利用图像还是利用形状模型集合创建已训练模板。输入图像内的可选搜索区域可限制模板搜索的范围。目的:这里主要分享一下,如何在一个ToolBlock中使......
  • workerman定时任务使用
    定时任务在有些场合很实用,像淘宝的自动确认收货就必须放在服务端进行,这时workeran的定时任务就派上用场了,它可以支持毫秒,crontab的粒度是一分钟需要注意的是因为定时任务一直在执行,业务逻辑里太耗时的需要使用异步操作,如用AsyncTcpConnection异步创建个tcp连接,把耗时操作放在这个......
  • 思维导图神器 xmind 使用过程的一些问题汇总
    xmind是一款商业思维导图(Mindmap)软件,目前有3个版本:xmind,,xmindPlus,xmindPro。其中xmindPlus,xmindPro是商业软件,并且是xmind公司的主要产品。更多的是面向商业付费用于,包含了类似"头脑风暴","演示模式","录音","过滤","搜索"等高级功能。软件采用目前全球最先进的EclipseRCP软......
  • 画时序图、类图、用例图的神器staruml使用常见问题汇总
    staruml是一款开放源码的UML开发工具,可绘制9款UML图:用例图、类图、序列图、状态图、活动图、通信图、模块图、部署图以及复合结构图等当然还有很多其他工具如SoftwareIdeasModeler,甚至有在线画时序图的:https://www.websequencediagrams.com/,不过速度很......
  • VisionPro Blob工具基本使用
    Blob功能用于查找和分析图像中的各种形状。Blob是先根据用户设定好的灰阶范围对图像进行分割,然后对目标进行查找和分析。Blob结果报告多种属性面积质心周长主轴…适用场景:1.对象在尺寸、形状、方向上有很大差异(很难或不可能训练模型)2.在背景中没有明......
  • USART知识总结
    一、知识总结1.USART:(UniversalSynchronous/AsynchronousReceiverTransmitter)通用同步/异步串行收发送器。通常使用UART,UART异步收发器,是一种通用的串行、异步通信总线,该总线有两条数据线,可以实现全双工的发送和接收,在嵌入式系统中常用于主机与辅助设备之间的通信。2.并......
  • VisionPro PMAlign基本使用
    1.CogPMAlignTool的操作方法抓取图像-设置训练区域及参数-训练模板-设置运行参数与区域-运行-查看结果2.CogPMAlignTool的基本原理图案位置搜索工具(识别+定位)基于边缘特征的模板而不是基于像素的模板匹配支持图像中特征的旋转与缩放边缘特征表示图像中不同区域......
  • c++ stl std::sort使用例子
    classUser{public:int32_tm_fight_power;private:int32_tm_level;};boolCenterData::compare(constUser*left,constUser*right){if(left->m_fight_power!=right->m_fight_power){returnleft->m_fight_power>ri......