本片博客用于记录之后要用到Bootstrap的学习笔记

 

概括:

  Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

 

选用的原因:

  1、浏览器支持:所有的主流浏览器都支持 Bootstrap。

  2、容易上手:只要具备 HTML 和 CSS 的基础知识,就可以开始学习 Bootstrap。

 

包的基本结构:

  Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

  Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。

  Bootstrap 包含了十几个自定义的 jQuery 插件。可以直接包含所有的插件,也可以逐个包含这些插件。

  感觉够用。

 

基本框架:

  Bootstrap网格系统。

  维基百科对于Grid System的解释:

  在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。

  感觉和之前学习的JAVA,C#里面绘制界面都有网格系统,所以不算太陌生。

官方文档:

  Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

 

  其实我觉得总结起来就是以下几句话:

  1、行必须放置在 .container class 内。

  2、行确定水平分组,列确定行内分组。

  3、内容放在列里面,内容是行的直接子元素,当然,列里面也可以再分行。

  4、可以用预定义的网格类,比如.col-xs-4,这些就很好使。

  5、可以修改内边距调整列里面的内容之间的距离。

 

简单的代码结构如下,容器里面放行,行里面放列:

 <div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....

第零阶段成果

代码:

 <div class="container">

    <h1>我就画个玩玩</h1>

    <div class="row">
<p>排序前</p>
<div class="col-md-4" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我爱软工
</div>
<div class="col-md-8" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
软工爱我
</div>
</div><br>
<div class="row">
<p>排序后</p>
<div class="col-md-4 col-md-push-8"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
我爱软工
</div>
<div class="col-md-8 col-md-pull-4"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
软工爱我
</div>
</div> </div>

  之后看了一下Bootstrap CSS的一些其他小功能,比如如何加代码,如何加表格什么的,感觉都不是特别重要,就先不写了,下次打算学习下Bootstrap的布局组件,感觉还是挺好写的。

 

  

Bootstrap学习笔记博客的更多相关文章

  1. Python_我的学习笔记 (博客停更------)

    贡献一张PyCharm快捷键图(图片是借用他人的)----------建议最大化查看,因为这样不会破坏布局 注:部分内容引用小甲鱼,其他等网页,网站内容.如有冒犯,请联系我. 2019.07.21  ...

  2. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  3. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  4. Android学习之 博客专栏 与 资料

    android | Android Developers Android学习系列 - 谦虚的天下 - 博客园 android基础 - 生如夏花之灿烂 - 博客园 Android开发 - 皓月繁星 - ...

  5. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  6. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  7. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  8. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  9. Hive学习 系列博客

    原 Hive作业优化 原 Hive学习六:HIVE日志分析(用户画像) 原 Hive学习五--日志案例分析 原 Hive学习三 原 Hive学习二 原 Hive学习一 博客来源,https://blo ...

随机推荐

  1. makefile--subst

    Makefile里的subst用法是$(subst FROM,TO,TEXT),即将TEXT中的东西从FROM变为TOMakefile中的字符串处理函数格式:    $(subst ;,;,;)名称: ...

  2. CSS------添加注释框

    my.html <div><a href="#" class="tip">你好<span><k>哈哈哈哈< ...

  3. nodejs的require模块及路径

    在nodejs中,模块大概可以分为核心模块和文件模块. 核心模块是被编译成二进制代码,引用的时候只需require表示符即可,如(require('net')). 文件模块,则是指js文件.json文 ...

  4. 笔记:C语言数据类型在32位与64位机器上的字节数

    读<深入理解计算机系统> 第二章 信息的表示与处理 32位与64位的典型值,单位字节 声明 32位机器 64位机器 char 1 1 short int int 4 4 long int ...

  5. perl use base 继承

    centos6.5:/root/podinns/lib#cat First.pm package First; use base qw(Second); sub new { my $self = {} ...

  6. destoon_笔记

    {mb_substr($shop_type[catname],0,4)} {dsubstr($v['company'],18)} =================================== ...

  7. 分享 Xamarin.android 关于使用SQLiteOpenHelper的小白经验

    关于使用SQLiteOpenHelper的使用,对于小白的我,百度啦相当多的大神的介绍,均未能让我这新手(零基础)成功学会,参考了http://www.cnblogs.com/yaozhenfa/p/ ...

  8. 随心测试_软测基础_002_&lt;测试工程师_核心技能体系&gt;

    测试工程师核心技能体系构成 测试基础体系:[对象——>方法——>流程].[测试活动类型——>质量] 测试分析体系:[测试对象分析]——>[测试设计(计划.数据.用例.文档)] ...

  9. LeetCode--003--无重复字符的最长子串(java)

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc&qu ...

  10. 无法启动此程序,因为计算机中丢失 api-ms-win-crt-stdio-l1-1-0.dll 解决

    问题描述 最近用一台Windows Server 2012 R2系统的机器的时候碰到了这个问题. 因为在网上看了很多解决方案,都没有很好的解决.所以记录一下这个问题的解决. 之前使用VS2013编译出 ...