Bootstrap 辅助类和响应式工具

Bootstrap_03_(全局CSS之表单&按钮&图片&辅助类&响应式工具) 本节课我们接着上节课内容继续讲全局CSS的样式,今天主要讲表单、按钮、图片、辅助类、以及响应式工具 1.表单 基本表单 class="form-control":可为<input> <textarea> <select>元素设置该属性,会将宽度设置为100% class="form-group": 可为<div>设置该属性,<div>中包含<label>和<input>,这样层次... 阅读详情

一.辅助类

1.情景文本颜色

类描述
.text-muted柔和灰
.text-primary主要蓝
.text-success成功绿
.text-info信息蓝
.text-warning警告黄
.text-danger危险红

2.情景背景色

类描述
.bg-primary主要蓝
.bg-success成功绿
.bg-info信息蓝
.bg-warning警告黄
.bg-danger危险红

3.关闭按钮

<button type="button" class="close">&times;</button>

4.三角符号

<span class="caret"></span>

5.快速浮动

<div class="pull-left">左边</div>
<div class="pull-right">右边</div>

6.块级居中

<div class="center-block">居中</div>

7.清理浮动

<div class="clearfix"></div>

8.显示和隐藏

<div class="show">show</div>
<div class="hidden">hidden</div>
<!--情景文本颜色-->
        <p class="text-muted">柔和灰</p>
        <p class="text-primary">主要蓝</p>
        <p class="text-success">成功绿</p>
        <p class="text-info">危险红</p>
        <p class="text-warning">警告黄</p>
        <p class="text-danger">危险红</p>
        <!--情景背景颜色-->
        <p class="bg-muted">柔和灰</p>
        <p class="bg-primary">主要蓝</p>
        <p class="bg-success">成功绿</p>
        <p class="bg-info">危险红</p>
        <p class="bg-warning">警告黄</p>
        <p class="bg-danger">危险红</p>

        <!--关闭按钮-->
        <button type="button" class="close">&times;</button>

        <!--三角符号-->
        <div class="caret">

            <div class="container">
                <!--快速移动-->
                <div class="pull-left">元素浮动到左侧</div>
                <div class="pull-right">元素浮动到右侧</div>

                <!--块级居中-->
                <div class="center-block">居中</div>

                <!--清理浮动-->
                <div class="clearfix"></div>
            </div>

            <!--显示和隐藏-->
            <div class="show">show</div>
            <div class="hidden">hidden</div>

这里写图片描述

二.响应式工具

Bootstrap可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。
这里写图片描述

<!--超小屏幕激活显示-->
<div class="visible-xs-block a">Bootstrap</div>
<!--超小屏幕激活隐藏-->
<div class="hidden-xs-block a">Bootstrap</div>
从零开始:MTK ISP调试中的ImagiqSimulator实战指南 本文详细介绍了MTK ISP调试中ImagiqSimulator的实战应用,从环境准备、参数加载到核心模块调整,提供全面的调试流程指南。重点讲解了DM模块参数优化技巧和常见问题解决方案,帮助工程师高效完成ISP调试工作,提升图像处理质量。 阅读详情

相关推荐

中国30米分辨率城市建成区数据集 (1972-2023年)

全国城市建成区空间分布数据(1972-2023年),利用Google Earth Engine平台,基于Landsat系列遥感影像提取了1972–2023年城市不透水面,后经过不透水面聚集密度计算方法计算了不透水面聚集密度,通过阈值划分提取了城市建成区,并设置了建成区面积阈值,去除了噪点,获取了全国城市建成区空间分布数据集。该提取能准确刻画城市形态,提取精度高,保持了建成区的完整性。数据集包括41期数据,1972年,1978年,1985-2023年逐年,分辨率为30米,有栅格和矢量两种格式。

地球资源数据云的官方博客 5825

【前端】Bootstrap:响应式布局与工具类

Bootstrap 作为一个强大的前端框架,不仅为开发者提供了丰富的组件,还内置了强大的响应式设计工具。这些工具使得网页能够适应不同设备的屏幕尺寸,无论是桌面、平板,还是手机,网页都能呈现最佳的用户体验。本文将详细介绍 Bootstrap 的响应式设计理念以及与之相关的工具类。

2303_80346267的博客 1822

Python实现微信PC端聊天记录自动化监听与智能回复

本文详细介绍了如何使用Python实现微信PC端聊天记录的自动化监听与智能回复。通过win32api和uiautomation库,模拟人工操作,实时监控聊天窗口并抓取新消息。文章重点讲解了核心代码逻辑、环境搭建步骤,并提供了实现关键词触发自动回复的完整方案,旨在提高工作效率与信息管理自动化水平。

weixin_29092031的博客 346

Bootstrap响应式工具类

响应式工具类 Bootstrap提供了响应式类和打印机类。使用响应式类,可以针对不同设备显示或隐藏某些内容。使用工具类,可以针对打印机和浏览器显示或隐藏某些内容。 有针对性的使用这些工具类,可用避免为同一个网站创建完全不同的版本。相反,通过使用这些工具类,可以在不同设备上提供不同的展现形式。 响应式类 响应式类中,以.visible-开头的类表示仅在某尺寸的屏幕上显示,在其他屏幕上都隐藏;...

歪脖先生的博客 1207

Oasys安装教程

在基环境下执行然后去 C:\Users.condarc打开 .condarc这个文件 删除干净里面的东西。

weixin_44254178的博客 1296

Python遥感图像处理指南(2)-卫星影像分析MNDWI提取

在第一篇文章中,我们使用了我们导入的软件包中已定义的函数,如 rasterio 中的 open 和 read 以及 matplotlib 中的 imshow。现在,我们可以编写自己的函数了。函数是一段代码,它接收一些参数作为输入并返回输出(经过一些计算),可以在代码中多次重复使用,也可以被其他代码重用。在 Python 中定义一个新函数非常简单。return v在此语法示例中,arg1和arg2强制参数,应该传递给函数,否则会引发错误,而arg3是一个可选参数,如果是,则假定默认值 1从函数调用中省略。

gis收藏家的博客 1576

【练习】响应式工具bootstrap

1.微金所顶部通栏(响应式工具bootstrap) 现在api中复制基本模版 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt;   &lt;head&gt;     &lt;meta charset="utf-8"&gt;     &lt;meta http-equiv="X-UA-Compatible" content=&qu

weixin_40326021的博客 452

实战复盘:如何用Frida脚本绕过某书APP的libmsaoaidsec.so检测(附完整Hook代码)

本文深入探讨了如何利用Frida脚本绕过某书APP通过libmsaoaidsec.so实现的反Frida检测机制。通过分析动态链接过程中的关键节点和检测模式,提供了两种实战验证的绕过方案:动态Hook关键链接器函数和静态Patch SO文件。文章还分享了进阶对抗策略和调试技巧,帮助安全研究人员有效应对现代移动安全防护挑战。

weixin_42706667的博客 219

bootstrap响应式工具

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式工具</title> <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css"> <script src="../JS/jquery-3.2.1.m

小姑姑的博客 745

【心得】Back trader避坑指南(一)——关于安装过程的问题

我认为一开始比较容易卡住的地方,主要是安装上面的问题。我给大家整理的这个版本是我能跑通的版本,还有一些好用的神器,手把手教你怎么装!

weixin_38347757的博客 1303

openpi 入门教程(一)安装、训练、微调与推理

OpenPI是由物理智能团队发布的机器人开源模型和软件包,包含两种主要模型:基于流的扩散视觉-语言-动作模型(VLA)的π₀模型和基于FAST动作标记器的自回归VLA的π₀-FAST模型。这些模型已在超过10,000小时的机器人数据上进行了预训练,并提供了基础模型检查点,支持开箱即用或根据用户数据集进行微调。OpenPI的实验性质意味着它可能不适用于所有平台,但鼓励研究人员和从业者进行创造性实验。运行这些模型需要至少具备NVIDIA GPU,推荐使用RTX 4090或更高规格的显卡。OpenPI支持在Ubu

2506_90492529的博客 5108

Bootstrap 响应式布局辅助类

响应式布局辅助类为了针对移动设备进行快速开发,在 responsive.less 文件中,Bootstrap 为响应式开发提供了一些辅助 class,它们用于针对不同设备显示和隐藏内容。可用的 class 列表及它们在各个media query下的效果见表 2‑2。表 2‑2 响应式布局的类Class手机767px and below平板电脑979px to 768px台式电脑Default.vi...

歪脖先生的博客 549

基于YOLOv8的野生菌菇检测、识别与分类系统

YOLOv8是YOLO系列模型的最新版本,继承了YOLO系列高效、精确的特点。YOLOv8采用了新的网络架构,并优化了推理速度和检测精度。与传统的目标检测算法(如Faster R-CNN)不同,YOLO模型通过一次前向传播同时完成目标定位与分类,因而具有非常高的计算效率。

YOLO 1284

bootstrap辅助类和响应式工具

辅助类和响应式工具 辅助类和响应式工具 .a{ height: 50px; width: 200px; background-color: #ccc; } boot

杨哥的博客 323

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

Bootstrap之辅助类样式,响应式工具和小图标组件

Bootstrap之辅助类样式,响应式工具和小图标组件的使用 一. 辅助类样式Bootstrap 在布局方面提供了一些细小的辅助类样式,用于文字颜色以及背景色的设置、显示关闭图标等等。 1. 文本颜色类 2. 背景颜色类 3. 其他类 关闭按钮 close 三角符号 caret 块级居中 center-block 快速浮动 pull-left(左浮动),pull-right(右浮动)

Hei, Welcome To vickie's Blog,Good Good Study, Day Day Up ~ 4078

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

Bootstrap辅助类和响应式工具

辅助类 Bootstap在布局方面提供了一些细小的辅助样式,用于文字颜色以及背景色的设置、显示关闭图标等等 1.情景文本颜色 样式名 描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text-warning 警告黄 text-danger 危险红 <p cla

Just The Way You Are 666

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Bootstrap03之表单,按钮,图片,辅助类,响应式工具

表单 class=”form-control”:可以给<input>、<textarea>、<select>元素设置宽度为100% 示例代码: <form action="" method=""> <label>用户名:</label> <input type="text" class="form-control" /> </form> 之前我们写在文本框前面写用户名 一直都是直接写字,在实际开发中

weixin_60786293的博客 838

Bootstrap 辅助类和响应式工具(四)

一、辅助类 <div class="container"> <p class="text-muted">Bootstrap练习系统学习,没有bg-muted 类别</p> <p class="bg-success text-success">Bootstrap练习系统学习</p> <...

weixin_30646505的博客 103

bootstrap全局CSS之表单&按钮&图片&辅助类&响应式工具

表单 基本表单 class="form-control":可为<input> <textarea> <select>元素设置该属性,会将宽度设置为100% class="form-group": 可为<div>设置该属性,<div>中包含<label>和<input>,这样层次会更清晰 内联表单【让所有的表单元素都显示在一行】 <form class="form-inline"> 表

andrew_dear的博客 701

bootstrap学习笔记——06——辅助类和响应式工具

辅助类 Bootstrap在布局方面提供了一些细小的辅助样式,用于文字颜色以及背景色的设置、显示关闭图标等等。 情景文本颜色 //各种色调的字体 &lt;p &gt;Bootstrap视频教程 正常黑&lt;/p&gt; &lt;p class="text-muted"&gt;Bootstrap视频教程 柔和灰&lt;/p&gt; &lt;p class="text...

小贺的博客 238

前端基础之《Bootstrap(4)—全局CSS样式_图片、辅助类、响应式工具》

1、表格响应式(.table-responsive)2、图片响应式(.img-responsive)1、让块标签居中(.center-block)2、蓝色(.text-primary)3、绿色(.text-success)5、黄色(.text-warning)1、圆角(.img-rounded)2、右浮动(.pull-right)2、圆形(.img-circle)1、灰色(.text-muted)1、蓝色(.bg-primary)2、绿色(.bg-success)1、左浮动(.pull-left)

csj50的专栏 512

Bootstrap 快速入门之第四章 全局CSS之表单&按钮&图片&辅助类&响应式工具

一:表单 ①:基本表单 class="form-control":可为<input> <textarea> <select>元素设置该属性,会将宽度设置为100% class="form-group": 可为<div>设置该属性,<div>中包含<label>和<input>,这样层次会更清晰 基本表单演示: <form> <div class="form-group"&...

qq_61313896的博客 971

【Bootstrap学习笔记】2.栅格系统、辅助类和响应式工具

五、栅格系统 学习内容 概念 Bootstrap提供了一套响应式、移动设备优先的流式栅格系统。 移动设备优先:设置如下meta,即屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 &amp;amp;amp;amp;amp;lt;meta name=&amp;amp;amp;amp;quot;viewport&amp;amp;amp;amp;quot; content=&amp;amp;amp;amp;quot;width=device-w

sunraito的博客 375

Bootstrap中图片,辅助类,响应式实用工具总结

总览 辅助类 文本 以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗: 类 描述 .text-muted “text-muted” 类的文本样式 .text-primary “text-primary” 类的文本样式 .text-success “text-success” 类的文本样式 .text-info “text-info” 类的文本样式 .text-warning “text-warning” 类的文本样式 .text-danger.

YZSS17的博客 303

bootstrap——辅助类和响应式工具类

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>辅助类和响应式工具类</title> <link rel="stylesheet" type="text/css" href="css...

weixin_30826095的博客 91
上一篇: Bootstrap 栅栏系统
下一篇: Bootstrap 图标
flowser
博客等级 码龄11年 37粉丝 119原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值