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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容