首页 > 编程语言 >直播app源码,Bootstrap响应式布局简单使用

直播app源码,Bootstrap响应式布局简单使用

时间:2023-07-19 14:23:07浏览次数:29  
标签:... 样式 app Bootstrap 源码 直播

直播app源码,Bootstrap响应式布局简单使用

1.创建html模版,并引入Bootstrap的样式:

<!doctype html> <!-- html5类型 -->
<html>
  <head>
    <meta charset="utf-8">  <!-- 页面编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  <!-- 使用IE最高版本 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- 视口宽度与设备一致 -->
    <!-- 上面3个meta标签得放在<head>最前面 -->
    <title>...</title>
    
    <!-- 引入Bootstrap依赖 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,得放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>  
  </head>
  <body>
    <html标签 class="Bootstrap样式名" /> //使用Bootstrap样式
  </body>
</html>
 

​2.容器样式:

(1)container容器样式(固定宽度,宽度分为12等份):

<html标签>  <!-- 使用container容器 -->
  ...
</html标签>
 

(2)container-fluid容器样式(填满屏幕,宽度随屏幕变化):

<html标签>  <!-- 使用container-fluid容器 -->
  ...
</html标签> 

以上就是直播app源码,Bootstrap响应式布局简单使用, 更多内容欢迎关注之后的文章

 

标签:...,样式,app,Bootstrap,源码,直播
From: https://www.cnblogs.com/yunbaomengnan/p/17565455.html

相关文章

  • uniapp专栏 —— vscode报错 'uni' is not defined.
    写在前面这些内容基于通过cli搭建的uniapp项目,使用了vite4,ts4.9,vue3(组合式API,setup语法糖)。如果有版本不一致,请谨慎参考。正文uni是一个全局变量,但是eslint没有识别到。避免这个错误报错在.eslintrc.js文件中加上配置globals:{uni:true},......
  • android 判断app 通知栏系统开关
    Android判断App通知栏系统开关实现方法1.概述在Android开发中,判断App通知栏系统开关是一个比较常见的需求。本文将介绍一种实现方式,通过使用NotificationManager类和NotificationChannel类来判断App通知栏系统开关是否打开。2.实现步骤下面是整个实现过程的步骤表格:步骤......
  • docker 23 使用devicemapper
    Docker23使用devicemapperDocker是一种容器化平台,可以帮助开发者更轻松地构建、打包和分发应用程序。其中的devicemapper是一种存储驱动,用于管理Docker容器的镜像和数据。本文将介绍如何使用devicemapper驱动程序来管理Docker23版本中的容器。什么是devicemapper?devicemapper......
  • 解决直播间源码音视频不同步问题的有效方式
     随着网络技术的发展和移动设备的普及,电视、电脑、手机等数码产品越来越智能,我们不管是在家或是在外面都可以运用不同的数码产品去看剧或是短视频等,但可能很多人遇到过这样一种情况:当我们在看剧或是短视频的时候,可能出现声音与画面不对等的情况,举个例子,视频画面进度到了第十分钟......
  • Could not find compile target android-33 for modules :app
         检查一下这些地方......
  • vue3,ts,vite4,uniapp设置路径别名
    安装依赖npminstall--save-dev@types/node配置vite.config.ts文件//vite.config.tsimport{defineConfig}from'vite';import{resolve}from'path';exportdefaultdefineConfig({resolve:{alias:{'/@/':resolve(......
  • uniapp小程序客服拖拽+左右吸附
    <template> <viewclass=""v-if="x!=0&&y!=0"> <movable-areaclass="movableArea"> <movable-viewclass="movableView":position="position":x="x":y="y&q......
  • bWAPP靶场搭建(phpstudy)
    我目前只打算在windows上使用该靶场,所以只看了windows中phpstudy搭建的教程,如果使用linux的docker,那更方便,phpstudy搭建bWAPP靶场的具体过程可以参考以下两位大佬:无mysql冲突的情况:https://www.cnblogs.com/zzjdbk/p/12981726.html有mysql冲突的情况:https://blog.csdn.net/we......
  • C# 程序中使用AutoMapper实体映射
     我的开发环境framework为4.7.2添加AutoMapper9.0引用创建实体映射公共类publicclassAutoMapperUnity{publicstaticIMapperautoMapperTool;publicAutoMapperUnity(){autoMapperTool=AutoMapperUnit......
  • Nest.js框架下,nest g app auth 命令报错!
    首先报错信息是:Failedtoexecutecommand:node@nestjs/schematics:sub-app--name=auth--no-dry-run--no-skip-import--language="ts"--source-root="apps/reservations/src"--spec--no-flat--spec-file-suffix="spec",大概的意思就是无法执行这条命令。......