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来做就好了。

RX学习笔记:Bootstrap的更多相关文章

  1. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  2. RX学习笔记:JavaScript数组操作

    RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...

  3. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  4. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  5. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  6. bootstrap学习笔记--bootstrap排版类的使用

    标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式,这个和一般的html没啥区别.请看下面的实例: <h1>测试1 h1</h1> <h2& ...

  7. bootstrap学习笔记--bootstrap布局方式

    Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备.平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑.台式电脑)上的组件和网格. 移动设备优 ...

  8. bootstrap学习笔记--bootstrap概览

    HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...

  9. RX学习笔记:在FreeCodeCamp的学习

    FreeCodeCamp https://www.freecodecamp.com 2016-07-03 前几日在Github浏览时,偶然看到一个叫FreeCodeCamp的开源项目,进去该网站之后感 ...

随机推荐

  1. 经常使用的webservice接口

    Web Service 一些对外公开的网络服务接口 2011-10-29 14:12 商业和贸易: 1.股票行情数据 WEB 服务(支持香港.深圳.上海基金.债券和股票:支持多股票同一时候查询) En ...

  2. 彻底解决android读取中文txt的乱码(自动判断文档类型并转码

    原文:http://blog.csdn.net/handsomedylan/article/details/6138400 public String convertCodeAndGetText(St ...

  3. nginx+tomcat动静分离结构

    本文采用另一种策略对动静分离进行演示,它的大致结构如图 2 所示. 图 2. 本文设计的动静分离结构 在本文中,我们将静态资源放在 A 主机的一个目录上,将动态程序放在 B 主机上,同时在 A 上安装 ...

  4. 多线程NSOperation

      NSOperation(经常使用): 1.为什么会有NSOperation?弥补gcd的一些问题:1)下载为例子:如果gcd放到队列中的block操作面对网络有问题,block之外无法取消bloc ...

  5. MySql安装步骤详解,MySql的root密码设置,启动MySql服务。

    1.下载mysql安装包,并解压,双击mysql-5.6.24-winx64.msi 2.点击下一步 3.选择custom 4.选择安装内容和位置,5个安装内容要选择will be installed ...

  6. Linux下Openssl的安装全过程

    第一章 1.下载地址:http://www.openssl.org/source/ 下一个新版本的OpenSSL,我下的版本是:openssl-1.0.0e.tar.gz 可以通过#wget http ...

  7. Lucene全文检索系列(一)

    1. Lucene简介 Lucene是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎.Lucene以其方便使用.快速实施以及灵活性受到广泛的关注.它可以方便地嵌入到各种应用中实现针对应用的全文 ...

  8. WPF 中的绑定方式

    1.元素间的绑定 xaml方式 <Slider Name="slider1" Value="20"/>        <TextBlock T ...

  9. 关于SWT中的Label类和Text类

    Label类的继承关系图 Label是SWT中最简单的界面组件,给出他的一个实例如下: public class Label1 { public static void main(String[] a ...

  10. dos下循环复制一张图片的bat

    @echo off setlocal enabledelayedexpansion ,,) do ( @echo !dm! copy .png !dm!.png ) 我期待的结果是将140041.pn ...