RX编程笔记:Bootstrap

Bootstrap

https://getbootstrap.com

2016-07-01

在学习FreeCodeCamp课程中了解到Bootstrap,并于课程第一个实战题卡在响应式部分,于是先对Bootstrap做一下学习。

初步理解Bootstrap是一个用于制作响应式网页的框架。

——何谓响应式网页,就是同一个网页可以在不同设备屏幕分辨率间自适配尺寸显示。

——何谓框架,其实就是事先准备好的各种css样式表、js脚本的组合,用于在制作网页过程中调用,无须再重复制造轮子。简单点理解,就是代码模板,或者说就是傻瓜式建站,只需简单地增加内容,就可以做出漂亮的网站。

要使用Bootstrap,先从官网下载代码包,dist包中有三个文件夹,css、js和fonts,文件不少,实际上只需css文件夹中的一个叫Bootstrap.min.css文件就能开始工作,至于js和fonts后面才来理解。

按官网提供的Basic template指示,网页头部按下面二点照做就好:

1.网页头部必须以下面三行开始:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

2.在头部连接Bootstrap.min.css文件

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

然后接着来看看Starter template,页面主体分为两个部分,一个是nav导航条,一个是container页面内容,然后所有的内容都使用了Bootstrap提供的预定义CSS类。

这样看来使用Bootstrap的重点就是使用它提供的预定义CSS类,只要熟悉了这些基本类,应该就能简单使用Bootstrap了。

但是,有好多不同种类的类,看来也不是一时半会能深入认识的,反正先学会按Strater template来做就好了。

时间: 2024-10-23 22:53:31

RX编程笔记:Bootstrap的相关文章

RX编程笔记:在FreeCodeCamp的学习

FreeCodeCamp https://www.freecodecamp.com 2016-07-03 前几日在Github浏览时,偶然看到一个叫FreeCodeCamp的开源项目,进去该网站之后感觉网页有点土的土绿色,有点像个人搭建的不靠谱.但是其竟然还有一个附加的公益项目,就是帮非赢利免费编程,看了一下好像还真有点样子.于是怀着试试看的想法开始了里面的免费编程教程. 然后便开始有点着迷了.教程采用的是幻灯片式介绍.少量重要视频.大部分为任务式在线编码的方式,和CodeSchool或慕课网类

python核心编程--笔记

python核心编程--笔记 的解释器options: 1.1 –d   提供调试输出 1.2 –O   生成优化的字节码(生成.pyo文件) 1.3 –S   不导入site模块以在启动时查找python路径 1.4 –v   冗余输出(导入语句详细追踪) 1.5 –m mod 将一个模块以脚本形式运行 1.6 –Q opt 除法选项(参阅文档) 1.7 –c cmd 运行以命令行字符串心事提交的python脚本 1.8 file   以给定的文件运行python脚本 2 _在解释器中表示最后

C++windows内核编程笔记day07_day08,可视化建菜单、加速键使用、绘图等

可视化操作创建的菜单,加载到窗口. 方法1:注册时指定菜单 wce.lpszMenuName=MAKEINTRESOURCE(IDR_MENUMAIN);//数字形式的资源ID转换为字符串形式的资源 方法2: //创建窗口时加载菜单资源 HMENU menumain= LoadMenu(g_hinstance,MAKEINTRESOURCE(IDR_MENUMAIN)); menumain 传入 CreateWindowEx();//倒数第三个参数 窗口指定小图标: 1.注册时指定 wce.hI

C++windows内核编程笔记day09_day10,对话框和窗口基本控件等的使用

//设置字体颜色 SetTextColor(hdc,RGB(255,0,0)); //窗口背景 //wce.hbrBackground=(HBRUSH)(COLOR_WINDOW+1); //wce.hbrBackground=CreateSolidBrush(RGB(0,0,255)); //设置字体背景 SetBkColor(hdc,RGB(0,0,200)); //设置字体背景模式 SetBkMode(hdc,TRANSPARENT);//字体背景透明 //创建字体,成功返回字体,失败返回

Azure编程笔记(3):用Fiddler调试Azure的应用程序

 内容提要 Azure的服务是通过RESTfulAPI提供的.虽然Azure针对很多编程语言都提供了SDK,但这些SDK也只是RESTfulAPI的一层封装.在调用SDK或者RESTfulAPI出错时,我们需要使用调试工具来分析并解决问题.Fiddler是一款功能强大的免费工具,我们可以使用Fiddler来调试Azure的应用程序.本文展示如何用Fiddler调试一个常见的访问Storage的问题. 问题描述 在前面的两篇博客中,我们模拟社交网站定义了一个Account类型.本文我们继续以A

linux网络编程笔记——TCP

1.TCP和UDP TCP是长连接像持续的打电话,UDP是短消息更像是发短信.TCP需要消耗相对较多的资源,但是传输质量有保障,UDP本身是不会考虑传输质量的问题. 2.网络传输内容 我习惯的做法是直接通过TCP传送结构体,当然前提是收发两端都在程序里对目标结构体有充分的定义.特别说明的一点是,要小心收发两端处理器的大小端问题!而且传输信息头里必须包含长度信息,而且通用的是大端.但是,这里的长度和结构体,我选择用小端进行传输. 3.TCPserver实现 参考了别人多线程的回调写法,看起来不错.

4.28 UNIX环境高级编程 笔记

int dup(int filedes); int dup2(int filedes,int filedes2); 这两个函数都可以实现复制一个现存的文件描述符,但是dup一定返回当前可用最小文件描述符,dup2可以用filedes2参数指定新描述符数值.如果filedes2已经打开,则先将其关闭.如果filedes等于filedes2,则返回filedes2而不关闭. 这些函数返回的新文件描述符与参数参数filesdes共享同一个文件表项. 图3 执行dup之后的内核数据结构 dup2是原子操

C#编程笔记一

---恢复内容开始--- 编程笔记 override与new实现的版本控制 // versioning.cs // CS0114 expected public class MyBase { public virtual string Meth1() { return "MyBase-Meth1"; } public virtual string Meth2() { return "MyBase-Meth2"; } public virtual string Met

DSP28377S - ADC学习编程笔记

DSP28377S -  ADC学习编程笔记 彭会锋 2016-08-04  20:19:52 1 ADC类型导致的配置区别 F28377S的ADC类型是Type 4类型,我的理解是不同类型的ADC采样方式是不一样的:F28335ADC 采样序列可以配置为顺序采样和同步采样模式,而F28377S采样序列可以配置为round-robin or burst模式,这两种模式下面再讲解. 2 ADC上电配置步骤 首先明确一点,ADC是专用管脚,不需要配置GPIO,所以可以直接配置ADC的寄存器 //Wr