Bootstrap 介绍

Unsplash

Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包,该框架能帮助我们快速开发 web 页面以及响应式网站,我们能够使用 Bootstrap 预先定义好的 class 进行样式书写,其最主要特点是栅格系统,默认有 12 列

.

超小屏幕 (<768px)

小屏幕 (≥768px)

中等屏幕 (≥992px)

大屏幕 (≥1200px)

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

含义

xs x-mall

sm small

md middle

lg lagrge

需要注意代码里的一些知识点: ① .container 最外层 class.row 行,.col-md=6 占据行中的列数 ② 快捷键 .container > .row > .col-md-3 > .row.container 是有固定宽度的,.container-fluid 代表的是 100% 宽度 ④ .col-md-offset-3 表示偏移原来的位置 3 列 ⑤ .img-responsive 图片自适应宽度属性 ⑥ 不使用 align,font 来设置样式,而是通过 CSS 来设置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bootstrap</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
  <div class="navbar-sixed-top" style="background-color:#000;">
    <div class="container">
      <ul class="nav navbar-nav">
        <li><a href="###">Home</a></li>
        <li><a href="###">About</a></li>
        <li><a href="###">Contact</a></li>
      </ul>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-9">
        <div class="jumbotron">
          <h1>Hollo,world!</h1>
          <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
        </div>
        <div class="row">
          <div class="col-md-4 col-xs-6">
            <h2>Heading</h2>
            <p>Lorem</p>
            <a href="###" class="btn btn-default">View datails</a>
          </div>
          <div class="col-md-4 col-xs-6">
            <h2>Heading</h2>
            <p>Lorem</p>
            <a href="###" class="btn btn-default">View datails</a>
          </div>
          <div class="col-md-4 col-xs-6">
            <h2>Heading</h2>
            <p>Lorem</p>
            <a href="###" class="btn btn-default">View datails</a>
          </div>
          <div class="col-md-4 col-xs-6">
            <h2>Heading</h2>
            <p>Lorem</p>
            <a href="###" class="btn btn-default">View datails</a>
          </div>
          <div class="col-md-4 col-xs-6">
            <h2>Heading</h2>
            <p>Lorem</p>
            <a href="###" class="btn btn-default">View datails</a>
          </div>
          <div class="col-md-4">
            <h2>Heading</h2>
            <p>Lorem</p>
            <a href="###" class="btn btn-default">View datails</a>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="list-group">
          <a href="#" class="list-group-item active">Link</a>
          <a href="#" class="list-group-item">Link</a>
          <a href="#" class="list-group-item">Link</a>
          <a href="#" class="list-group-item">Link</a>
          <a href="#" class="list-group-item">Link</a>
          <a href="#" class="list-group-item">Link</a>
          <a href="#" class="list-group-item">Link</a>
          <a href="#" class="list-group-item">Link</a>
          <a href="#" class="list-group-item">Link</a>
          <a href="#" class="list-group-item">Link</a>
          <a href="#" class="list-group-item">Link</a>
        </div>
      </div>
    </div>
    <hr>
    <div class="row">
      <p>© Company 2014</p>
    </div>
  </div>
</body>
</html>

运行结果 1

运行结果 2

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 在 Canvas 放一个超过大小的元素会不会被裁剪

我尝试在一个宽度200高度200的 Canvas 放了一个宽度 300 高度 300 的元素,这个元素会不会被 Canvas 裁剪了? 经过我的测试,发现默认是...

10510
来自专栏进击的君君的前端之路

原生JS实现Tab切换效果和模态框效果

28350
来自专栏九彩拼盘的叨叨叨

Vue2 组件通信写法总结

子组件只接收在子组件定义的 props的值。通过 this.prop名称 获得父组件传数据。

6420
来自专栏小筱月

flex 布局

CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

22120
来自专栏一“技”之长

Bootstrap响应式前端框架笔记四——表单

    在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布局表单时...

14410
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何在手机上实现电子签名功能

设置控件的背景色,将该属性设置为“128, 255, 128”,表示RGB颜色,如图1;

22120
来自专栏deepcc

jquery nicescroll 配置参数

41380
来自专栏全沾开发(huā)

如何使用CSS绘制一个响应式的矩形

如何使用CSS绘制一个响应式的矩形 背景: 最近因为需要用到绘制类似九宫格的需求,所以研究了一下响应式矩形的实现方案。 有如下几种方案...

354100
来自专栏十月梦想

jq获取滚动条距离

最近开学了,也在写新的项目,很多实例都用到了滚动条的距离,判断距离显示指定的内容(主要用于顶部导航的固定)

10520
来自专栏知道一点点

bootstrap快速入门笔记(七)-表格,表单

2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

26230

扫码关注云+社区

领取腾讯云代金券