本片博客用于记录之后要用到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. DB2 Enterprise Server Edition(DB2 ESE)9.1在Windows Server 2008 下出现无法新建数据库的情况,及解决办法

    在安装有,DB2 9.1版本的Windows Server 2008 上面,使用默认的安装方式导致无法创建数据库,相关的错误提示: "SQL3012C 发生系统错误(原因码= "& ...

  2. 使用laravel的Eloquent模型获取数据库的指定列

    使用laravel的Eloquent模型获取数据库的指定列   使用Laravel的ORM——Eloquent时,时常遇到的一个操作是取模型中的其中一些属性,对应的就是在数据库中取表的特定列. 如果使 ...

  3. (转)最新版的SSH框整合(Spring 3.1.1 + Struts 2.3.1.2 + Hibernate 4.1)

    最近一直有朋友在问,最新版的Spring.Struts.Hibernate整合老是有问题,昨晚大概看了一下.从Hibernate 4 开始,本身已经很好的实现了数据库事务模块,而Spring也把Hib ...

  4. 自定义类StyleSheet跨浏览器操作样式表中的规则

    这是群里网友地瓜提供的一个类,不熟悉样式表对象和样式规则对象的浏览器差异的可以看看 /** * Stylesheet.js: utility methods for scripting CSS sty ...

  5. 清楚css浮动的三种方法

    第一种:添加新元素,应用clear:both;  <div class="clear"></div> css样式:clear:both; 第二种:在浮动元素 ...

  6. 微信内嵌浏览器打开手机浏览器下载APP(APK)的方法

    想必大家会经常碰到网页链接在微信内无法打开和微信内无法打开app下载页的情况.通常这种情况微信会给个提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢,主要有以下四点 1.网页链接被举报次数 ...

  7. [MicroPython]TPYBoard开发板DIY小型家庭气象站

    对于喜欢登山的人来说,都会非常关心自己所处的高度跟温度,海拔高度的测量方法,海拔测量一般常用的有两种方式,一是通过GPS全球定位系统,二是通过测出大气压,根据气压值算出海拔高度. BMP180是一直常 ...

  8. jsp页面重定向

    <%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncodi ...

  9. 【转】Python验证码识别处理实例

    原文出处: 林炳文(@林炳文Evankaka) 一.准备工作与代码实例 1.PIL.pytesser.tesseract (1)安装PIL:下载地址:http://www.pythonware.com ...

  10. C# ,asp.net 获取当前,相对,绝对路径

    一.C#获取当前路径的方法: 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2. ...