Bootstrap入门

Bootstrap简介
      Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。是基于 HTML、CSS、JAVASCRIPT 的由 Twitter 的 Mark Otto 和 Jacob Thornton 开发。与 2011 年八月在 GitHub 上发布的开源产品。
Bootstrap常用的基本语法
容器样式:
    (1).container:响应式的,指定宽度的容器~随着浏览器的尺寸变化自动变化宽度。
    (2).container-fluid:铺满浏览器窗口的流式容器浏览器有多宽这个样式就有多宽
    注意:不能嵌套使用。
    目的:标记一个区域,这个区域中,就可以使用栅格系统布局。
    在容器样式中可以定义行样式与列样式。
    (1).行样式:row 表示声明一行
    (2).列样式:col-md-n 表示声明一列占用n个标准列的位置。
    (3).列偏移:col-md-offset-n 从左至右偏移的列数。
    在Bootstrap中网页尺寸的定义有四种,分别适用于不同的屏幕尺寸。
    lg:屏幕尺寸大于1170px情况下使用
    md:屏幕尺寸大于970px情况下使用
    sm:屏幕尺寸大于768px情况下使用
    xs:屏幕尺寸小于768px情况下使用

    .hidden-md:表示让修饰的元素标签在md尺寸下隐藏,其他三种尺寸下显示
    .visible-md:表示让修饰的元素标签在md尺寸下显示,其他三种尺寸下隐藏 。
全局样式
    关于文本:
        (1). text-left 文本左对齐
        (2). text-right 文本右对齐
        (2). text-center 文本居中对齐。
    文本颜色与背景颜色

<div class="row">
    <div class="col-md-12">
        <h1>文本颜色操作</h1>
        <p>文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-muted">文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-primary">文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-success">文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-info">文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-warning">文本颜色同样根据bs中提供的主要色调进行确定</p>
        <p class="text-danger">文本颜色同样根据bs中提供的主要色调进行确定</p>

        <p>背景颜色的处理,根据不同的场景定义不同颜色操作</p>
        <p class="bg-primary">背景颜色的处理,根据不同的场景定义不同颜色操作</p>
        <p class="bg-success">背景颜色的处理,根据不同的场景定义不同颜色操作</p>
        <p class="bg-info">背景颜色的处理,根据不同的场景定义不同颜色操作</p>
        <p class="bg-warning">背景颜色的处理,根据不同的场景定义不同颜色操作</p>
        <p class="bg-danger">背景颜色的处理,根据不同的场景定义不同颜色操作</p>
    </div>
</div>

    Bootstrap中提供了不同的按钮样式

<div class="row">
    <div class="col-md-12">
        <h1>按钮样式</h1>
        <button>原始按钮</button>
        <button class="btn btn-default">默认按钮</button>
        <button class="btn btn-primary">蓝色按钮</button>
        <button class="btn btn-success">绿色按钮</button>
        <button class="btn btn-info">淡蓝色按钮</button>
        <button class="btn btn-warning">黄色按钮</button>
        <button class="btn btn-danger">红色按钮</button>
    </div>
</div>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355

推荐阅读更多精彩内容

  • Bootstrap致力于:快速、高效开发移动端应用为主的JS 框架Bootstrap 是最受欢迎的 HTML、CS...
    沫明阅读 735评论 0 0
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,874评论 3 184
  • BootStrap 敏捷响应式框架,自带了多种样式,利用栅格系统对不同分辨率的的设备进行适配。 引入文件 ...
    61etj阅读 379评论 0 0
  • 个别类的使用 1.bootstrap的引入模板: 2排版 bootstrap覆盖了原来的标题样式,bootstra...
    云龙789阅读 1,817评论 0 1
  • ## 一、活动说明: 很高兴遇到易仁永澄老师,他是 易仁永澄关注个人成长领域 专注于高效率、慢生活的践行者 致力于...
    不知道_57f0阅读 514评论 0 1