bootstrap元素宽度_简单介绍一下BootStrap

最新推荐文章于 2023-11-25 20:20:28 发布
最新推荐文章于 2023-11-25 20:20:28 发布
阅读量326 收藏
点赞数
文章标签： bootstrap元素宽度

BootStrap

l 概念：一个前端开发的框架，Bootstrap是基于html、css、Javascript的。

1. 框架：框架是一个半成品软件，开发人员可以在框架基础上进行开发，简化编码。

2. 好处：

① 定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。

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

l 快速入门

1. 下载Bootstrap

2. 下载后有三个文件夹，将这三个文件夹复制到项目中

3. 创建html页面，引入必要的资源

<!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">

<title>Bootstrap HelloWorld</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="js/jquery-3.4.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</head>

<body>

<h1>你好，世界！</h1>

</body>

</html>

f985bf892200c8d2d5a24e5e9f314e8a.png

响应式布局

l 同一套页面可以兼容不同分辨率的设备，按照我的想法是随着页面的缩小而调整页面布局，随着页面的增大也调整布局使之适应页面的内容。

l 实现：依赖于栅格系统

栅格系统：将一行平均分为12个格子，可以指定元素占几个格子

l 步骤：

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

1. 容器的分类：

1．container：两边有空白，除了最小的屏幕

2．container-fluid：每一种设备都是100%宽度

2. 定义行。相当于之前的tr 样式：row

3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

1. 设备代号

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

2．sm：小屏幕 平板 (≥768px)

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

4．lg：大屏幕 大桌面显示器 (≥1200px)

1. 注意事项：

1．一行中如果格子数目超出12，那么就会自动换行

2．栅格类属性可以向上兼容

3．如果真实设备的宽度小于了设置栅格属性的设备代码的最小值，会一个元素占满一整行。

f985bf892200c8d2d5a24e5e9f314e8a.png

CSS样式和JS插件

全局css样式：

l 按钮 ：class = “btn btn-default”

l 图片:
* class = “img-responsive”
* 图片形状

1. <img src="..." alt="..." class="img-rounded"> //方的

2. <img src="..." alt="..." class="img-circle"> //圆的

3. <img src="..." alt="..." class="img-thumbnail"> //相框型的

l 表格：

1. table

2. table-bordered 边框

3. table-hover 悬浮效果

l 表单

1. 给表单添加：class="form-control"

2. 给form上添加：class=“form-horizontal”:水平排列

3.

f985bf892200c8d2d5a24e5e9f314e8a.png

组件：

导航条

<nav class="navbar navbar-default">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<!-- 右边三个横线按钮，汉堡按钮 -->

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span> <!-- 汉堡按钮的横线，有一个就加一条横线 -->

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Brand</a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

<li><a href="#">Link</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li role="separator" class="divider"></li>

<li><a href="#">Separated link</a></li>

<li role="separator" class="divider"></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

<form class="navbar-form navbar-left">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

<ul class="nav navbar-nav navbar-right">

<li><a href="#">Link</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li role="separator" class="divider"></li>

<li><a href="#">Separated link</a></li>

</ul>

</li>

</ul>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

f985bf892200c8d2d5a24e5e9f314e8a.png

分页条：

<nav aria-label="Page navigation">

<ul class="pagination">

<li>

<a href="#" aria-label="Previous">

<span aria-hidden="true">«</span>

</a>

</li>

<li><a href="#">1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">4</a></li>

<li><a href="#">5</a></li>

<li>

<a href="#" aria-label="Next">

<span aria-hidden="true">»</span>

</a>

</li>

</ul>

</nav>

f985bf892200c8d2d5a24e5e9f314e8a.png

插件：

轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

<li data-target="#carousel-example-generic" data-slide-to="1"></li>

<li data-target="#carousel-example-generic" data-slide-to="2"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<div class="item active">

<img src="..." alt="..."> <!-- 图片的地址之类的 -->

<div class="carousel-caption">

... <!-- 这儿写图片下的字，不写比较好看 -->

</div>

</div>

<div class="item">

<img src="..." alt="...">

<div class="carousel-caption">

...

</div>

</div>

... <!-- 这儿的...表示可以有多张图片 -->

</div>

<!-- Controls -->

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

</div>

weixin_39912303
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
漂亮的Bootstrap模板 The Project 最新版 v2.1
06-07
全宽，全屏和盒装宽度幻灯片 视频背景 黑暗/灯光标题 黑暗/光脚 可选的固定导航栏（粘滞导航栏） 同位素过滤 字体图标（Fontawesome） 文本轮换 图形/图表 组件的吨 可重复使用的元素 100％响应 跨浏览器 多个定价表...
Bootstrap简述
weixin_71437031的博客
08-18 2764
栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-、.co-/g-和.col-xl*类名。组件可以有自己的属性和方法。由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。...
Bootstrap基本介绍
m0_68756200的博客
03-31 1万+
Bootstrap 一、Bootstrap是什么 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 是一个用于快速开发Web应用程序和网站的前端框架 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 二、为什么要用Bootstrap 因为Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、更容
1. bootstrap概述
wxhua420701325的博客
10-21 4302
Bootstrap 是 Twitter推出的，目前最流行的前端开发框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，用于快速开发 Web 应用程序和网站的前端框架。用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap简介
归兮的博客
08-18 5828
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
Bootstrap里的文件作用
11-29 702
Bootstrap里的文件分别表示什么？都有什么用？ bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-responsive.min.css bootstrap.js bootstrap.min.js 回答：bootstrap.css 是完整的bootstrap样式表，未经...
Bootstrap4 表单
01-19
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单元素 , , 和 elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。 Bootstrap4 表单布局 堆叠表单 (全屏宽度)：垂直...
Bootstrap实现默认导航栏效果
11-22
导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了为站点名称和基本的导航定义样式。 创建一个默认的导航栏的步骤如下： 向 <nav> 标签...
Bootstrap布局方式详解
01-19
Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。 一、移动设备优先策略 1、内容： ...
bootstrap如何让dropdown menu按钮式下拉框长度一致
08-30
bootstrap框架提供了下拉菜单组件（dropdown），即点击一个元素或按钮，触发隐藏的列表显示出来。下面通过本文给大家介绍bootstrap如何让dropdown menu按钮式下拉框长度一致,需要的朋友可以参考下
BootStrap前端框架
Skf_0004010的博客
11-04 4837
BootStrap 1、Bootstrap介绍 什么是bootstrap? 简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。 Bootstrap是基于HTML,CSS,Javascript的 特点 移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式 响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局） 偏UI，综合框架，包含一些常用的UI组件以及一些JS组件 Bootstrap的适用场景？ b
【Bootstrap】Bootstrap介绍致初学者
DeepLearning_的博客
07-05 919
Bootstrap 是 Twitter 公司开发的一个基于 HTML、CSS、JavaScript 的技术框架，符合 HTML、CSS 规范，且代码简介、视觉优美。Bootstrap 集合 HTML、CSS 和 JavaScript，使用了最新的浏览器技术，为实现快速开发提供了一套前端工具包。使用 Bootstrap 不仅可以构建出非常优雅的 HTML 页面，而且占用资源非常少，使用 gzip 压缩后大小仅用 10KB。并且 Bootstrap 在跨浏览器兼容方面表示也很好。
Bootstrap的安装和使用
Mr.Write的博客
05-10 5万+
Bootstrap的安装和使用一. Bootstrap简介Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。具体Bootstrap的学习教程可参考菜鸟教程二.
统计学中的Bootstrap方法介绍及其应用
热门推荐
芳樽里的歌的博客
01-25 7万+
简要介绍了统计学中的Bootstrap方法及其在时间序列相关检验中的应用。
统计学中的Bootstrap方法（Bootstrap抽样）
hxxjxw的博客
08-27 5万+
Bootstrap又称自展法、自举法、自助法、靴带法 , 是统计学习中一种重采样(Resampling)技术，用来估计标准误差、置信区间和偏差 Bootstrap是现代统计学较为流行的一种统计方法，在小样本时效果很好。机器学习中的Bagging，AdaBoost等方法其实都蕴含了Boostrap的思想，在集成学习的范畴里 Bootstrap直接派生出了Bagging模型 子样本之于样本，可以类比样本之于总体 举例 栗子：我要统计鱼塘里面的鱼的条数，怎么统计呢？假设鱼塘总共有鱼10...
BootStrap的简单介绍
星空之尘的博客
05-23 2万+
BootStrap 概念：一个前端开发的框架，Bootstrap是基于html、css、Javascript的。 框架：框架是一个半成品软件，开发人员可以在框架基础上进行开发，简化编码。 好处： ① 定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。 ② 响应式布局：同一套页面可以兼容不同分辨率的设备。 快速入门 下载Bootstrap 下载后有三个文件夹，将这三个文件夹复制到项目中 创建html页面，引入必要的资源 <!DOCTYPE html> <h
Bootstrap详解
m0_63640914的博客
08-06 1578
自己浅学学BootStrap，
Bootstrap框架 (黑马程序员)
最新发布
2301_80068547的博客
11-25 3522
栅格系统英文为 "grid systems"，也有人翻译为 "网格系统"，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口 ( viewport ) 尺寸的增加，系统会自动分为最多 12 列。Bootstrap 里面 container 宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把 container 划分为 12 等份。
bootstrap抽样
weixin_39669739的博客
08-07 8061
推断统计是指用样本数量特征推断总体特征 ，在现实生活中，我们只抽取一个样本，计算出一个统计量(样本均值，样本方差，样本比例等）的值，将其作为总体参数的一个估计值，这种方法也称点估计，但是这样做往往不准确，但是我们有了抽样分布的概念，指的是所有估计值的集合，以样本均值为例，由中心极限定理(clt)知， 从均值μ\muμ、方差为σ2{\sigma^2}σ2的任意一个总体中抽取样本容量为nnn的样本，当nnn充分大时，样本均值xˉ\bar{x}xˉ的抽样分布渐进服从均值为μ\muμ,方差为σ2n\frac{\s
Bootstrap 3 select 宽度 fill
05-27
如果您想让Bootstrap 3 select组件的宽度填满其父容器，您可以使用Bootstrap提供的栅格系统来实现。具体做法是将 select 元素包裹在一个具有 `col-*-*` 类的`div`元素中，如下所示： ```html <option>Option ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值