一、栅格系统

栅格系统用于通过一系列的行（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. 《Rust权威指南》学习笔记——8.通用集合类型

    Rust通用集合类型 动态数组Vec 字符串String 和&str 哈希映射HashMap

  2. 实现ViewPager一次滑动多页（保持居中）

    项目中开发日历功能,需求是可以连续滑动多页,有列表的流畅.又要保持当前页居中显示. 参考文献:  http://www.open-open.com/lib/view/open1435026935638 ...

  3. div 自动高度

    问题: 一个页面分上下二部分,上部分高度是固定不变的,要求下部分高度自动占满屏幕,如何实现? 第一感觉是准备用 JS 实现. 今天发现一个用 CSS 实现的方法 position: fixed; bo ...

  4. 实例正常，page页损坏处理

    1.select count(*) from XXXXX_homework; 可以查询 2.check table XXXXX_homework; 有报错,报连接失败. ERROR 2013 (HY0 ...

  5. MYSQL5.7索引异常引发的锁超时处理记录

    原始sql: update a set a.x=x where a.xid in (select b.xid from b inner join c on b.xxx = c.xxx) and a.x ...

  6. What is REST and Restful?

    什么是rest 和 restful? 提出rest的作者,目的:符合框架原理的情况下,理解和评估以网络为基础的应用软件的架构设计,得到一个功能强,性能好,适宜通讯的架构. Fielding将他对互联网 ...

  7. PyMySQL删除

    title: PyMySQL删除 author: 杨晓东 permalink: PyMySQL删除 date: 2021-10-02 11:27:04 categories: - 投篮 tags: - ...

  8. PL/SQL Initialization error Could not initialize 问题

    问题: PL/SQL Initialization error Could not initialize 问题 参考链接: https://blog.csdn.net/luoyanjiewade/ar ...

  9. abap 自定义搜索帮助

    ABAP 选择屏幕 自定义搜索帮助 物料号为例 如图展示的物料,是不经过自定义搜索帮助处理的,如果我只需要物料描述和物料号,且只限定20开头的物料,就需要用到自定义搜索帮助了 当使用自定义帮助后 效果 ...

  10. WDA学习（18）:UI Element:TabStrip使用

    1.11 UI Element:Tabstrip使用 本实例显示UI Element:Tabstrip的使用. 1.创建Component; 2.选择Layout页签,设置页面: 创建UI Eleme ...