BootStrap栅格布局初探

03-bootstrap-响应式布局-栅格系统 行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。通过“行(row)”在水平方向创建一组“列(column)”。你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。 阅读详情
说你呢,赶紧长按二维码,然后点击 识别图中二维码 
 
任何技术难题可进QQ群提问:【 小崔说编程】 
对于提问的原则是: 没有你不能问的,只有我不会答的

1472955908895017376.png说两句


小崔认为,在H5页面设计和制作中,布局是最重要,也是最难的部分。所谓布局就是让每个元素都在设计者希望它在的位置待着,别乱动。

BootStrap在开篇最重要的位置就是介绍其“栅格系统”,我认为确实是很重要的。

官方文档写的最详细,有能力的看那个,小崔写的这个业余了。https://v3.bootcss.com/css/#grid

当然,对于苦劝不听的,我更欢迎,这里简单聊聊BootStrap的栅格系统。

1472955908895017376.png原理


别管啥布局,在Html+Css中,就两种。

1 表格布局。用table > tr > td标签,最简单,也最恶心,强烈不建议。个人只在偶尔才用这样的布局。比如你做一个表单页面,用表格布局就挺不错的选择。

2 Div+CSS布局。基本现在差不多的网页都是这样布局的。

在布局中,主要是基于块元素和内联元素的特性。

内联元素:这个简单,想复杂也复杂不起来,直接向右排,到了页面最右边就换行。比如文字、图片、超级链接等都是内联元素。这个听起来不错哦?但其实特别难控制。因为~~它很难控制高度和位置,你用如果打算将一个文字、一个图片、一个按钮放在一行,然后还希望它们几个上下位置看起来比较优美,那就费死劲了。所以,这个其实是无法布局的。

块元素之Position定位:position有4种类型,默认的,相对的,绝对的,超级绝对的。

  默认(static) 按照本身的特性显示,该独占一行就独占一行,该向右排就向右排。

  相对(relative) 这个就有点儿可控制了,可以在默认(static)的位置基础上,相对移动。请一定要注意这个相对是相对什么的 -- 是相对自己本身应该待的位置。

  绝对(absolute) 基于上级容器的位置来绝对定位,注意:这个上级容器绝对不允许是默认(static)的

  超级绝对(fixed) 这个名字是小崔给它起的,其实也是绝对,只是这个绝对的参照物是整个窗口。

好了,经过上面的描述读者应该有点儿想法了吧?好用啊,就用这个来定位和布局吧。不好,很不好用,因为这样定位后,你的元素的大小位置就要写死了,很难适应不同的终端设备。简单的说就是,你绝对定位在1024宽度的电脑上,在居于左侧500的位置,换成手机上,500的位置就看不到了,跑手机外面了。

浮动布局之float属性:这个好用,块元素采用左右浮动,就很容易布局了。唯一要注意的就是:浮动元素不能再撑开外部的容器了,因此在若干个浮动容器之后,再增加一行清除浮动的div。

如下:

1
< div  style = "clear:both" ></ div >

1472955908895017376.pngBootStrap栅格系统


好了,原理说完了,开始说BootStrap采用的栅格系统了。

万变不离其宗,肯定也是基于以上的若干方式实现的栅格布局。

BootStrap的基本思想就是将常用的页面效果都封装成标准的类名(class),用户随时可以调用了。

在实现栅格布局的时候,BootStrap是这样考虑的 :

1 页面布局容器采用浮动方式。这样元素就从左向右顺序排排队,你需要操心的只是宽度和高度了。

2 先说高度,高度的问题就是自己控制了。BootStrap的栅格布局不管你的高度。

3 再说宽度,BootStrap认为一个页面宽度分成12份就足够细了,你的每个容器在宽度上占用1份还是3份都行啊。

看看下图,总宽度是12份,第一个白色背景的,宽度为3份,第二个蓝色背景的宽度为4份,第三个黄色背景的宽度为3份。

image.png

这样,分别用百分比给他们设置宽度就行了。

所以,BootStrap在设置每个容器栅格布局的时候,是强烈推荐采用百分比来设置宽度的。


BootStrap的栅格化类名有如下几种,(说明:**代表1-12的数字,比如col-sm-4):

col-lg-**:对超大屏幕采用的布局,如果你的显示器查过了1200px的宽度,就这个生效。

col-md-**:对中等屏幕的布局。显示器在992px-1200px之间的有效。

col-sm-**:对小屏幕的布局。譬如ipad

col-xs-**:超小屏幕的布局。譬如手机


如果你希望能自动适应多屏幕,那就要综合的使用这些类名。

1
2
3
4
5
6
7
8
9
10
11
< link  rel = "stylesheet" 
href = "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
crossorigin = "anonymous" >
< div  class = "col-md-9 col-xs-12" >
     < div  class = "input-group" >
       < input  type = "text"  class = "form-control"  placeholder = "关键字..." >
       < span  class = "input-group-btn" >
         < button  class = "btn btn-default"  type = "button" >搜索模板</ button >
       </ span >
     </ div >
</ div >

看看上面的例子,就是在普通电脑显示器上占9/12的宽度,如果在手机上,就占满屏了。



如何用BootStrap栅格系统实现响应式布局 BootStrap栅格系统 文章目录 一、什么是响应式布局? 二、如何实现响应式布局 三、实现步骤 四、实例 一、什么是响应式布局? 同一套页面可以兼容不同分辨率的设备。如在电脑上访问苹果的网站:https:/... 阅读详情

相关推荐

Bootstrap之栅格布局

Bootstrap之栅格布局 最近在学习基于boostrap下的栅格布局,这个布局功能非常强大,提供了一套响应式的布局解决方案,可实现在PC端,平板端和移动端切换。下面是一些总结: 1.栅格盒模型的精妙之处 容器两边具有15px的padding; 行:两边具有-15px的margin; 列:两边具有15px的padding; 为了维护槽宽规则,列两边必须要有15px的padding,为了能使列嵌套...

qq_41096610的博客 1032

解决bootstrap table表格插件所遇到的坑

效果图: 第一点:bootstrap tab好用,并且是前端分页(就是不需要去读后台数据库来辅助分页) 你下载了bootstrap,不是你就有了bootstrap table插件,你还得要下载bootstrap table插件; bootstrap下载地址:http://www.bootcss.com/ bootstrap table插件下载地址(下面3个有关)最好是从Github下载...

jintingbo的专栏 5万+

bootstrap的常用组件和栅格式布局详解

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目,本文介绍了bootstrap的常用组件和栅格式布局详解,有兴趣的可以了解一下

Bootstrap有多难?

bootstrap其实并没有想象中的那么神秘 bootstrap——个人感觉就是写代码的一个数据库,一个写前端网页非常方便的数据库,主要是将网页适用于各种媒体。 掌握了三个地方就算掌握了bootstrap 1.最重要的就是栅格化布局 所谓栅格化布局就是指把网页屏幕分成横向分十二份,在多大的媒体屏幕就分成多少份,使网页内容随着屏幕大小变化而变化,方便在各种媒体浏览网页。 栅格化布局的写法 ro...

jixiaolei_csdn的博客 1483

微机原理课程设计-模拟十字路口交通信号灯

一、设计任务描述 1.1设计目的 通过课程设计使学生更进一步掌握微机原理及应用课程的有关知识,提高应用微机解决问题的能力,加深对微机应用的理解。通过查阅资料,结合所学知识进行软、硬件的设计,使学生初步掌握应用微机解决问题的步骤及方法。为以后学生结合专业从事微机应用设计奠定基础。 1.2 设计要求 控制LED灯,按照十字路口红绿灯的原理亮灭显示: (1) 东西方向车辆放行x秒...

Learning_is_endless的博客 2万+

/proc/sys/vm/max_map_count耗尽时,调用glibc 2.11.3 free()导致程序crash,问题追踪和解决

1. 问题 在客户环境下,当我们的程序消耗较大内存时,会偶尔crash。 通过gdb分析,程序core dump在malloc/free函数内。 当把/proc/sys/vm/max_map_count 从65530增加到131070,程序再也不crash。 相关命令 echo 131073 > /proc/sys/vm/max_map_count 2.  core

万大胖博客,苦并快乐着 4430

Bootstrap栅格布局使用

这里是修真院前端小课堂,每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能,本篇分享的是: 【Bootstrap栅格布局使用】 大家好,我是IT修真院北京分院第29期学员吴昊杰,一枚正直善良的web程序员。 今天给大家分享一下,修真院官网 CSS任务中可能会使用到的知识点: Boots...

dedong4563的博客 283

【Apollo学习笔记】——规划模块TASK之SPEED_HEURISTIC_OPTIMIZER

在Apollo星火计划学习笔记——Apollo路径规划算法原理与实践与【Apollo学习笔记】——Planning模块讲到……Stage::Process的函数会依次调用task_list中的TASK,本文将会继续以LaneFollow为例依次介绍其中的TASK部分究竟做了哪些工作。由于个人能力所限,文章可能有纰漏的地方,还请批评斧正。在配置文件中,我们可以看到LaneFollow所需要执行的所有task。本文将继续介绍LaneFollow的第10个TASK——动态规划规划目标加速度尽可能小。

sinat_52032317的博客 3425

栅格布局一般怎么用_Bootstrap每天必学之栅格系统(布局)

1、栅格系统(布局)Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:网格系统的实现原理...

weixin_39875941的博客 679

STM32F103xx / STM32F429VET6最小系统原理图

心血来潮想试一下STM32F4系列和F1系列在编程上有什么差别,手头没有开发板,本着能勤俭节约的原则自己先做一块看看能不能成,看了一下STM32F429VET6的芯片在F429xx中最便宜,对照着数据手册绘制了原理图画了PCB,目前打板中,焊接完如果跑不通回来修改文章。这里我们可以看到,VDD是标准工作电压,VDDA是模拟工作电压,且VDDA必须与VDD等电位,VBAT是备份工作电压,一般接纽扣电池电源,如果存在VREF+引脚,则要求VDDA-VREF+ < 1.2V。截图下来比较糊,不知道为什么。

m0_51294753的博客 1万+

【BAAS】基于supabase的知识库详细设计

为满足快速开发需要和减少开发及维护成本,使用BAAS(Backend-as-a-Service)模式可以很好的降低我们的后端维护成本,并提高前端对接效率。一般来说,BAAS是一种云服务模式,BaaS供应商会为提供一些通用的能力,例如用户身份验证、数据库管理、远程更新和推送通知(针对移动应用程序),以及云存储和自托管。BaaS最主流的是Google的firebase,具有相当完善的功能和集成方案,但他是收费的,而且在我们实际项目中,可能需要私有化部署,这时就需要一些开源的替代方案,例如主流的。

Ric的博客 1781

bootstrap-栅格系统(响应式布局)

文章目录一、优点二、实现三、执行过程(1)定义容器(2)定义行(3) 定义元素四、注意事项(1) 自动换行(2)向上兼容性(3)向下不兼容性 一、优点 同一套页面可以兼容不同分辨率的设备(例如手机和电脑访问同一页面可能由于分辨率的不同减低用户体验度,而响应式布局就很好的解决了这个问题) 二、实现 依赖与bootstrap的栅格系统来实现:将一个页面的一行划平均分为12个格子,栅格系统基于不同的分辨...

kjw888的博客 3446

在Open3D中从网格中采样点云

在本文中,我们将学习如何使用Open3D从网格中采样点云。点云采样是点云处理的重要步骤之一,能够为后续的任务提供必要的输入。通过这些示例代码,我们可以很容易地使用Open3D库从网格模型中采样点云。值得注意的是,根据实际应用需求,我们可以调整采样点的数量和采样方法来满足不同的场景需求。除了使用Poisson Disk算法,Open3D还提供了其他的点云采样方法,如Uniform采样和Random采样。这个函数使用了Poisson Disk采样算法,可以在保持点云均匀性的同时,尽可能避免重叠点的生成。

FxRuby的博客 413

Bootstrap、栅格系统布局

组件是一个抽象的概念,是对数据和方法的简单封装。用面向对象思想来说,将一些符合某种规范的类组合在—起就构成了组件,通过组件可以为用户提供某些特定的功能。组件是构成页面中独立结构单元,是对结构的抽象,它主要以页面结构形式存在,可复用性很强。组件的使用并不复杂,每个组件拥有自己的作用域,每个组件区域之间独立工作,并且互不影响。组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能,能够根据业务逻辑来实现复杂的项目功能。...

m0_68618659的博客 9284

新手必看!手把手教你如何在飞牛NAS上玩转Docker容器!(飞牛Nas(fnOS)如何创建Docke容器以及Compose部署项目)

新手必看!手把手教你如何在飞牛NAS上玩转Docker容器!(飞牛Nas(fnOS)如何创建Docke容器以及Compose部署项目)

XiaoqiangClub的博客 1万+

(论文加源码)基于CNN和LSTM的脑电情绪识别(数据集为DEAP和seed)

论文及源码见个人主页:https://download.youkuaiyun.com/download/qq_45874683/84118637?spm=1001.2014.3001.5503 (论文加源码)基于CNN和LSTM的脑电情绪识别(数据集为DEAP和seed)4D-CRNN 目录 目录: 运行过程: 1. 运行1D文件(没有什么bug): 2. 再运行3D文件(没有出现bug): 3. 最后运行main文件(出现了两个bug)(前提需要配置好tensorflow的框架): 第一个bug是..

qq_45874683的博客 6366

响应式开发原理及Bootstrap栅格布局详解

文章目录响应式开发原理响应式布局容器Bootstarp简介优点Bootstarp的使用Bootstarp使用四部曲bootstrap的应用布局容器container类栅格系统简介栅格系统参数案例列嵌套列偏移 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 响应式布局容器 响应式需要一个父级做为布局容器 ,来配合子级元素来实现变化效果。 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面元素的排列方式和大小,从而实现不同屏幕下,看到不同的

qq_49900295的博客 4107

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

Bootstrap(bootstrap的栅格系统、bootstrap的布局容器)

一、bootstrap的栅格系统 用固定的格子进行网页布局,又称为网格布局 1、响应式栅格系统 使用响应式栅格系统进行页面布局时,网页根据不同的显示终端展示不同的页面结构。 例如,在校屏幕上由某些模块将按照不同的方式排列或者被隐藏。 2、创建使用响应式栅格系统页面的步骤(1)创建html页面 定义页头、导航、主要内容、侧边栏和页尾部分的HTML结构代 码(2)编写css样式 页头和页尾分别显示在网页的最上方和最下方,而中间的导航、主要内容和侧边栏根据浏览器窗口的大小...

m0_46420078的博客 6834

VC中sqlite的使用

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

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

Bootstrap4的栅格布局

Bootstrap4栅格布局1 栅格容器2 栅格布局的步骤3 声明列3.1 设置列宽3.1.1 平均分配栅格3.2.2 指定列宽3.2.3 可变的列宽3.3 列拆分3.3.1 自动拆分3.3.2 手动拆分3.3.3 响应式拆分3.4 列排序3.5 列偏移 Bootstrap架构内置了一套响应式网格的布局系统,网格布局实际上就是把网页分成一定数量的栏数或者叫做网格,Bootstrap4的网格系统就是...

weixin_45884768的博客 5221

深度学习工具包 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")

Bootstrap栅格布局解析

文章目录栅格布局初始栅格栅格布局源码栅格布局源码分析流体容器&固定容器公共样式@grid-gutter-width:槽宽,设置栅格中的padding值,防止文字紧贴固定容器的栅格样式栅格行的定义栅格列的定义make-grid-columns()——设置列的padding、positionmake-grid——设置列的float,width栅格布局使用栅格实例bootstrap组件的使用缩略图需求:响应式布局换行的时候想要从前面掉下去 栅格布局 初始栅格 栅格布局默认将一行分成12列,Bootstra

mantou_riji的博客 3358

【Bootstrap】bootstrap入门之栅格布局、弹性布局、组件类_02

Boot最重要的3个知识:手写媒体查询@media;栅格布局;scss。栅格布局,把所有的布局看做一行,用列数来表示每一个块占据宽度的大小,一行一共12列。栅格系统分为行.row和列.col,行必须包裹列。可以是一行包多列,也可以写多行包多列。

青春木鱼的博客 5604

Bootstrap3栅格系统布局实例

布局实例 Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先。使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局。 先看一个简单实例,来加深对移动设备优先的理解。假设我们只使用单一的一组 .col-md-* 栅格类来创建一个栅格系统: <divclass="row"> <divclass="col-md-4"&g...

歪脖先生的博客 4107

Bootstrap学习之二:栅格化布局

@(Bootstrap)导言前面我们讲了如何安装使用bootstrap框架,下面我们将会学习bootstrap的各种框架结构,布局。在这篇文章中将讲述如何使用栅格化布局 导言 什么是栅格化布局 开始栅格化布局a创建一个容器 b创建合适的栅格系统 c进行列的嵌套 d单元格的其他类 e列偏移1.什么是栅格化布局 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(vi

HiramYong的博客 3317

Bootstrap栅格布局

1、栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。 2、简介 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理: “行(row)”必须包含在.container(固定宽度)或.container-fl...

qq_35254085的博客 2013
上一篇: Maven中找不到或无法加载主类
下一篇: JS瀑布流插件 -- salvattore
小崔爱读书
博客等级 码龄23年 1563粉丝 109原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小崔爱读书

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值