一、栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

实例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        /* .col-xs-6{
            /* height:300px; */
        /*} */
        .col-xs-6:first-child{
            background: red;
        }
        .col-xs-6:last-child{
            background: blue;
        }
        /* .col-md-1{
            height: 100px;
        }
        .col-md-8{
            height: 100px;
        }
        .col-md-4{
            height: 100px;
        }
        .col-md-6{
            height: 100px;
        }
        .col-md-1{
            background: green;
        }
        .col-md-8{
            background: yellow;
        }
        .col-md-4{
            background: blue;
        }
        .col-md-6{
            background: red;
        } */
    </style>
</head>
<body>
   
    <div class="container">
        <div class="row">
             <div class="col-xs-6 col-md-3"></div>
             <div class="col-xs-6 col-md-3" ></div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
     
        <!-- Add the extra clearfix for only the required viewport -->
        <div class="clearfix visible-xs-block"></div>
     
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script>
       
    </script>
</body>
</html>
 
效果图

table表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <h1 class="text-danger">h1</h1>
    <h1 class="bg-danger">h1</h1>
    <a href="#" class="btn btn-danger">按钮</a>
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <!-- <th>
                <td>列1</td>
                <td>列1</td>
                <td>列1</td>
            </th> -->
            <th>列1</th>
            <th>列1</th>
            <th>列1</th>
        </thead>
        <tbody>
            <!-- 作用的是td -->
            <tr class="danger">
                <td>列1</td>
                <td>列1</td>
                <td>列1</td>
            </tr>
            <!-- 作用的是tr -->
            <tr class="bg-danger">
                <td>列1</td>
                <td>列1</td>
                <td>列1</td>
            </tr>
            <tr>
                <td>列1</td>
                <td>列1</td>
                <td>列1</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

bootstrap栅格系统，排版，代码，表格表单的更多相关文章

  1. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  2. Bootsrap表格表单及其使用方法

    bootstrap的使用 bootstrap中的js插件依赖于jQuery 因此jQuery要在bootstrap之前引入 参考官网标准引入方法和引入样式 排版 标题 Bootstrap和普通的HTM ...

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

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

  4. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  5. Bootstrap栅格系统（布局）

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  6. HTML表格表单综合——用户注册表

    今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  7. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  8. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

  9. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  10. 第二百三十五节，Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一．移动 ...

随机推荐

  1. 第14周 预习、实验与作业：Java数据库编程

    回想"流与文件"章节,如何将一组对象存储到文件中?主要步骤是什么. 把数据抽象为流,用字节输入输出流(InputStream,OutputStream)进行读写. 主要步骤为:创建 ...

  2. OpenMP fortran 学习

    参考自TAMU的PPThttps://people.math.umass.edu/~johnston/PHI_WG_2014/OpenMPSlides_tamu_sc.pdf 什么是OpenMP 在C ...

  3. ICPC2021 沈阳站

    B-Bitwise Exclusive-OR Sequence 牛客网 题意:对于\(n(n<=1*10^5)\)个数的序列,给定\(m(m<=2*10^5)\)个限制条件,每个限制条件形 ...

  4. docker 部署的mariadb数据库备份还原方案

    docker部署下的mariadb数据库备份还原方案 背景:在使用docker部署的mariadb时,我们会将容器内的数据卷挂载到宿主机上,做简单的备份,容器在正常运行和停止的情况下,能快速创建mar ...

  5. hover状态下改变图片颜色的方式 悬停图片切换；css变量；悬停svg图片改变颜色；VUE

    由外部json文件,按照配置方式引入图片路径时,需要一些值得注意的语法来动态引入和改变图片 1.图片路径设置 ,按照img标签动态引入图片 <img src=''/> 路径不引入变量,此时 ...

  6. fiddler 调试

    如果本地代理js发现跨域,需要手动修改自定义规则 1 static function OnBeforeResponse(oSession: Session) { 2 if (m_Hide304s &a ...

  7. Finance财务软件（权限管理专题）

    我们支持按模块对用户授权 如上所示,我们对用户test进行授权.test登录系统后将看不到未授权的菜单:

  8. centos linux 忘记密码

    1.开机 esc 将画面停止 2.   e 进入设置状态 3.编辑修改两处:ro改为rw,在LANG=en_US.UFT-8后面添加init=/bin/sh,版本不同 内容不同,找到对应的位置修改 4 ...

  9. C++时间日期相关

    // 计时 #pragma once #include <iostream> #include <thread> #include <chrono> #includ ...

  10. C#当窗体大小改变时，窗体中的控件大小也随之改变

    第一种:推荐 在窗体中加上如下代码即可实现,但窗体点击放大按钮时却不能改变控件大小. private Size beforeResizeSize = Size.Empty;protectedoverr ...