Bootstrap框架前端定义样式

最新推荐文章于 2023-11-03 17:49:54 发布

***码

最新推荐文章于 2023-11-03 17:49:54 发布

阅读量626

点赞数

分类专栏： javascript 文章标签： sql 数据库 mysql

本文链接：https://blog.csdn.net/qq_54942057/article/details/123354237

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

介绍

Bootstrap前端开发框架基本 HTML CSS javaScript的,定义了很多css样式和js插件

框架：开发人员可以在框架基础上，进行开发

响应式布局同一套页面可以兼容不同分辨率的设备

1.栅格系统：提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，可以指定元素占几个元素.

2.定义容器:相当于table表

2.1:容器分类

container-fluid: (100% 宽度,每一种设备都是100%）是指在固有的15px的padding前提下宽度总是当前视口的宽度。

aligment:排列

padding:内补

3:定义行:对应于tr 样式:row

4:定义元素:指定该元素在不同的设备上,所占的格子数目格式 .col-xl(设备代号)-6(格子数目)

4.1：格子数目:1-12
设备代号
xs:超小屏幕手机(<768px)
sm小屏幕平板(>=768px)
md:中等屏幕桌面显示器(>=992px)
lg:大屏幕大桌面显示器(>=1200px)

4.2:最大列宽 xs:自动
sm：~62px
md: ~81px
lg: ~97px

代码使用

   <style>
    .inner{
        border: 1px solid red;
    }
</style>
</head>
<body>
//定义容器
<div class="container-fluid">
//定义行
<div class="row" >
//定于元素
    <div class="col-lg-1    inner">1</div>
    <div class="col-lg-1    inner">1</div>
    <div class="col-lg-1    inner">1</div>
</div>
</div>

栅格系统:并没有改变代码,自动根据屏幕大小改变样式
注意:
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

container:（固定宽度):两边都有流白

xs:Node(自动)
sm: 750px
md: 970px
lg: 1170px

Bootstrap框架包了解

1.下载

bootstrap-3.3.7-dist //框架

2.jar包中所包含的css,fonts,js 所编写好的框架

  css  
	  bootstrap.css //格式良好 而阅读就使用不带min的 源码清晰格式良好
	  bootstrap.css.map
	  bootstrap.min.css //min是不带min的压缩版  将回车,制表符,table 都去掉了 为一行来显示 这个为体积较小些，然而传输的速度也会更块些 以资源为它
	  bootstrap.min.css.map
	  bootstrap-theme.css
	  bootstrap-theme.css.map
	  bootstrap-theme.min.css
	  bootstrap-theme.min.css.map
  
  fonts
	  glyphicons-halflings-regular.eot
	  glyphicons-halflings-regular.svg
	  glyphicons-halflings-regular.ttf
	  glyphicons-halflings-regular.woff
	  glyphicons-halflings-regular.woff2
  
  js
	bootstrap.js
	bootstrap.min.js
	npm.js

最简单的 Bootstrap 页面模板

项目中导入Bootstrap框架中的必要的三个文件夹(css,fonts,js)
创建HTML文件,引入必要的资源文件

<!doctype html>
<html lang="zh-CN">
<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">

<!--width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’ 可以理解为窗口
  device-width 设备宽度
  height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置
  initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数
  minimum-scale 允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数
  maximum-scale 允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数
 user-scalable 是否允许⼿动缩放 --->

<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="../../../css/bootstrap.min.css.map" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


<!--IE8 支持 HTML5 元素和媒体查询--->

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../../../js/jquery-3.2.1.min.js" integrity="sha384-	nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../../../js/bootstrap.min.js" integrity="sha384-		aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" 	crossorigin="anonymous"></script>
</body>
</html>

***码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap框架前端定义样式

介绍Bootstrap前端开发框架基本 HTML CSS javaScript的,定义了很多css样式和js插件框架：开发人员可以在框架基础上，进行开发响应式布局同一套页面可以兼容不同分辨率的设备1.栅格系统：提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，可以指定元素占几个元素.2.定义容器:相当于table表 2.1:容器分类container-fluid: (100% 宽度,每一种设备都是100%）是指在固有的1
复制链接

扫一扫