一、栅格系统

栅格系统用于通过一系列的行（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. JSP图书管理系统

    allbook.jsp pageEncoding="UTF-8"%> <%@ page import = "java.util.*" %> & ...

  2. win10休眠后自动开机解决方案

    工作时候打开的文件挺多的,所以就懒得关机了,因为再开机还要再次打开这么多的工具文档之类 windows还有两项就是睡眠和休眠 睡眠会把所有内容保存到内存里面,但要维持这些内容不丢失就要一直给内存供电, ...

  3. C++ 用同一个raw pointer传入shared_ptr构造函数生成两个智能指针有什么问题？

    Effective Modern C++ Item 19: use std::shared_ptr for shared-ownership resource Now, the constructor ...

  4. java post格式发送application/x-www-form-urlencoded

    import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import org.apache.http.*; ...

  5. win10 蓝屏代码 IRQL NOT LESS OR EQUAL 问题排查（ing）

    环境:Win10故障症状: 不定期蓝屏,重启 蓝屏代码: IRQL NOT LESS OR EQUAL 官方建议 尝试方法1:更新win10最新的补丁 [无效] 尝试方法2:重新安装显卡驱动(当前系统 ...

  6. servlet和spring框架的关系

    1.Servlet是什么? servlet就是一个Java接口,是JavaEE规范的一种,主要是为了扩展Java作为Web服务的功能. 由其他内部厂商如tomcat,JBoss内部实现web的功能. ...

  7. 动态修改网页的 icon 和 title

    在public的index.html中使用 link 和 title 占位(内容随意,获取到数据之后此处的内容会被覆盖) 在App.vue中调用接口获取数据,找到 link 和 title 元素,将获 ...

  8. Android Custom View使用Databinding

    Android Custom View是可以使用 databinding 的 //java.lang.IllegalArgumentException: View is not a binding l ...

  9. git如何把master合并到自己分支

    1.切换到主分支 git checkout master 2.使用git pull把master代码拉到本地 git pull 3.切换到自己的分支-->(XXX) git checkout X ...

  10. Dynamics 365 CRM 弹窗 打开自定义页面 Xrm.Navigation.navigateTo Open Web Resource

    在CRM中经常需要打开自定义的HTML界面,而且打开这个界面的时候需要模态窗体,阻止用户填写除了弹窗之外的东西,只能先填写窗体的内容: 这个时候很多人喜欢选择第三方的library去实现模态窗体,但是 ...