1.是什么？Bootstrap，来自 Twitter，是目前最受欢迎的前端框架，Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷    

    Bootstrap 插件全部依赖 jQuery

<!DOCTYPE html>

<html lang="zh-cn">  //lang属性指定当前页面所用的自然语言 注意是为浏览器自动翻译提供基础功能 屏幕阅读软件的基础发音

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">  //为小IE存在 跨IE浏览器兼容性级别 启动内核

    <meta name="viewport" content="width=device-width, initial-scale=1">// 重点 （view ）视口的概念

    <title>Bootstrap 101 Template</title>

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

      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> //让老IE兼容H5新标签
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>//让老IE支持媒体查询

  </head>

  <body>

    <h1>你好，世界！</h1>

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> //这个不多说 jq

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

官网抓来的模板  注释补上，另外为了方便使用bootlint 需要copy一段启动代码，见boot中文网 

2.css类

全局css

按钮
.btn block		 .btn-default

.btn		 .btn-color（   5种基础颜色） .btn-lg/sm/xs

（关于size的class）
图片 .img-circle .img-thumbnail img-responsive .img-round

精彩继续：

列表 .list-unstyle .list-online    
文字排版 .textcolor

5种基础颜色		 .bgcolor

5种基础颜色		 .text-uppercase 大写 
.text-lowercase 小写

.text-capitalize 首字母大

 .text-left  对齐方式

.text-right

.text-center

.text-justify
辅助类 .hidden[-lg][-md][-sm][-xs] .pull-left/right

左右浮动

.clearfix  清除浮动

 .caret 三角箭头

.close 关闭按钮		 .table

.tabke-bordered

.table-striped

.table-hover

.table-response
表单 默认表单 水平表单 行内  
         
         

响应式布局 Bootstrap（01）的更多相关文章

  1. 响应式布局 Bootstrap

    github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...

  2. 10套免费的响应式布局 Bootstrap 模版

    1. Cardio Cardio是我最喜欢的一个轻量级模板.它几乎可以很少的修改的用于任何类型的业务. 2. Evento Evento 是一个事件引导广告模板的形状.它是设计精美和注意细节. 3. ...

  3. 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

    "使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...

  4. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  5. 响应式布局之BootStrap

    本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...

  6. Bootstrap禁用响应式布局

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...

  7. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  8. 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板

    本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...

  9. bootstrap 自适应和响应式布局的区别

    自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...

随机推荐

  1. iOS开发UI篇—Button基础

    iOS开发UI篇—Button基础 一.简单说明 一般情况下,点击某个控件后,会做出相应反应的都是按钮 按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置 二.按钮的三种状 ...

  2. [Jquery]某宝图片轮播(无缝、带左右切换按钮)

    [效果] 左右移动(非渐隐) [思路] 1.结构与样式 ①最外层div盒子当容器,里面ul宽度无限大并且相对定位(到时候移动其实移的是ul的left) ②按钮的透明度可用background:rgba ...

  3. c#读取文本文档实践4-读入到list泛型集合计算后写入新文档

    商品 数量 单价英语 66 100语文 66 80数学 66 100化学 66 40物理 66 60 上面截图是要处理的文本文档内容,目的是计算出总价并加在最后一列. 这一篇与上一篇比较类似,目的相同 ...

  4. CSS3-Media Query 基础

    一.常见的属性: device-width , device-height 屏幕宽高 width , height 渲染窗口宽高 orientation 设备方向 resolution 设备分辨率 二 ...

  5. Android常见控件— — —EditText

    <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...

  6. NSAssert的使用

    NSAssert的使用   苹果在foundation.framework中定义了这么一个宏: #define NSAssert(condition, desc, ...)   第一个参数为一个条件判 ...

  7. springmvc学习第一天

    一.helloworld的实现 1.加入jar包(加入无关的jar包可能会引起服务器的冲突) commons-logging-1.2.jarjstl.jarspring-aop-4.1.6.RELEA ...

  8. 对HTML+CSS+JavaScript的个人理解

    HTML就像人的骨头架子,是人的根基,要有个人样呀,一个网站,一个WebApp要是缺根儿骨头,那就像人少个胳膊少个腿儿的,行动不方便啊:CSS就像人穿得衣服.鞋子,男人的纹身,女人擦得粉儿,好看呀,一 ...

  9. eclipse如何导入项目

    链接来自百度经验: 点击打开链接

  10. 从零开始学习Node.js例子二 文本提交与显示

    index.js var server = require("./server"); var router = require("./router"); var ...