首页 > 其他分享 >Bootstrap-01

Bootstrap-01

时间:2023-09-14 14:39:10浏览次数:43  
标签:江一燕 01 md Bootstrap 栅格 col 设备

Bootstrap概念

1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。

框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。

好处:

1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。

2. 响应式布局。

同一套页面可以兼容不同分辨率的设备。 例如:http://m.taobao.com https://www.apple.com/

https://www.bootcss.com 官网

快速入门

下载Bootstrap

在项目中将这三个文件夹复制

min压缩版,上线之后一般用的压缩版

引入资源文件

手动引入jquery-3.2.1.min.js

根据参考文档找到基本模版 注意:引入文件的顺序问题

<!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 -->
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>



<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="bootstrap-3.4.1-dist/js/jquery-3.4.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

响应式布局

同一套页面可以兼容不同分辨率的设备。

实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子

栅格系统:

  1. 定义容器。相当于之前的table、

容器分类:

1. container :两边留白

2. container-fluid:每一种设备都是100%宽度

  1. 定义行。相当于之前的tr 样式:row
  2. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目

设备代号:

1. xs:超小屏幕 手机 (<768px):col-xs-12

2. sm:小屏幕 平板 (≥768px)

3. md:中等屏幕 桌面显示器 (≥992px)

4. lg:大屏幕 大桌面显示器 (≥1200px)

<!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 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
     <style>
       .row div {
          border: 1px solid red;
        }
      </style>
      
  </head>
  <body>
      
      <!-- 定义容器-->
      <div class="container">
        <!-- 定义行 -->
        <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 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="js/jquery-3.4.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="hs/bootstrap.min.js" crossorigin="anonymous"></script>
  </body>
</html>

注意:

  1. container留白
  2. 一行中如果格子数目超过12,则超出部分自动换行。
  3. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。.col-xs –>向上兼容
4. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,缩小会一个元素沾满一整行。

列偏移

<!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>入门</title>

    <!-- bootstrap.min.css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .row div{
            border: 1px solid green;
        }
    </style>
  </head>
  <body>
      
      <!-- 定义容器-->
      <div class="container-fluid">
          <!-- 第一行-->
          <div class="row">
             <div class="col-md-1">江一燕</div>
             <div class="col-md-1">江一燕</div>
             <div class="col-md-1">江一燕</div>
             <div class="col-md-1">江一燕</div>
             <div class="col-md-1">江一燕</div>
             <div class="col-md-1">江一燕</div>
             <div class="col-md-1">江一燕</div>
             <div class="col-md-1">江一燕</div>
             <div class="col-md-1">江一燕</div>
             <div class="col-md-1">江一燕</div>
             <div class="col-md-1">江一燕</div>
             <div class="col-md-1">江一燕</div>
          </div>
          <!-- 列偏移-->
          <div class="row">
              <div class="col-md-4">col-md-4</div>
              <div class="col-md-4 col-md-offset-4">col-md-4</div>
          </div>
          <!-- 列偏移-->
          <div class="row">
              <div class="col-md-3">col-md-3</div>
              <div class="col-md-3 col-md-offset-6">col-md-3 col-md-offset-6</div>
          </div>
          <!-- 列偏移-->
          <div class="row">
              <div class="col-md-2 col-md-offset-4">col-md-2 col-md-offset-4</div>
              <div class="col-md-6">col-md-6</div>
          </div>
      </div>
    
   

    <!-- 引入jQuery -->
    <script src="js/jquery-3.4.1.js"></script>
    <!-- js/bootstrap.min.js -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


标签:江一燕,01,md,Bootstrap,栅格,col,设备
From: https://blog.51cto.com/u_16228353/7470061

相关文章

  • Flutter example01
    import'package:flutter/material.dart';import'package:english_words/english_words.dart';voidmain()=>runApp(MyApp());classMyAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){//finalworldP......
  • P2532 [AHOI2012] 树屋阶梯
    原题有点被降智了,但降得不多我先说我的\(TLE\)做法把设\(dp_{i,j}\)表示楼梯第一行长\(i\),最后一行长\(j\)的划分方案数我们每次看覆盖掉左下角的矩形的右上角覆盖位置,可以得到递推式:\[dp_{i,j}=\sum_{k=i}^{j}{dp_{i,k-1}\timesdp_{1,j-k}}\]最终复杂度\(O(n^3)\),但别......
  • ORA-01775: looping chain of synonyms
    检查其他表、视图、函数等有无重复定义过同义词select*fromall_synonymswheretable_owner='HD40'andsynonym_namenotlike'%/%'andSYNONYM_nameLIKE'%VENDORAPPLY%'andtable_namenotin(selectobject_namefromuser......
  • oracle数据库使用to_timestamp格式化日期数据时,报错: ORA-01821: date format not reco
    今天偶然发现一个问题:我使用的数据库是11.2版本的sql语句:SELECTto_timestamp('2023-09-1315:43:29.943','yyyy-mm-ddhh24:mi:ss.fff')ASmydataFROMdual就会报错,项目出现问题,但很神奇的时使用oracle数据库12版本的就不会报错。 网上查了下,说是毫秒处是6位的,但只显示3位......
  • P3214 [HNOI2011] 卡农
    原题首先我们先简化一下题意。为什么呢?因为这个题如果不简化题意是不太好做的我们考虑用二进制表示集合,这样题意为:有\(2^n-1\)个数,我们要从中选一个大小为\(m\)的无序子集,满足以下条件:集合中所有数的异或和为\(0\)集合中元素不可重复首先无序子集是吓人的,因为我们可......
  • visual studio community 2015 clodelens功能
    关于community版本中增加codelens功能,网上能搜索到不少安装ssdt后出现该功能的文章,之前我也是参照这些文章来安装codelens功能的,但前几天重装系统后,再次安装ssdt时codelens功能并没有像预期那样出现,经过一系列的折腾,发现是ssdt版本的问题,在最新版的ssdt(14.0.61712.50)中阉割......
  • P5505 [JSOI2011] 分特产
    原题还是二项式反演,主要问题是怎么发现他是这个关系因为我们发现我们钦定\(T,P\subseteqS,|T|=|P|\)时,我们假设里面有一个元素\(x,y\)不相同,则他们会计算两次因此是二项式反演......
  • day06 - 哈希表 part01
    力扣242.有效的字母异位词思路,将s串的每个字母哈希表表值++,再将t串每个字母的哈希表值--,如果是有效字母异位词,那么哈希表二十六个字母应该对应的是0.判断如果有不是0的就返回false,否则为true代码boolisAnagram(strings,stringt){  if(s.size()!=t.size()) {......
  • # Day 01计算机基础和环境搭建
    课程概要计算机基础编程本质Python的介绍Python环境的搭建计算机基础1.1基本概念计算机的组成计算机是由多个硬件组合而成,常见的硬件有CPU,硬盘,内存,网卡,显示器,机箱,电源...注意事项:机械将零件组合到一起,他们是无法进行协作的操作系统用于协调计算机的各个零件,让硬......
  • 2023软件工程专业01
    目录我的初心当初为什么报软件工程这个专业?当初对软件工程这个专业的期待和想象是什么?当初希望自己是如何投入这个专业的学习的?曾经做过什么准备,或者立下过什么FLAG吗?我的简历预期目前最想学的技术我的初心当初为什么报软件工程这个专业?当初原本我是想着在选专业......