<!DOCTYPE html>

<html>

<head>

    <title>bootstrap</title>

    <!-- 引入bootstrap的css样式库 -->

    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- 引入第三方库 -->

    <link rel="stylesheet" type="text/css" href="animate.css">

</head>

<body>

<!-- 按钮控件 -->

<!-- <button class="btn btn-success">提交</button>

<button class="btn btn-info">提交</button>

<button class="btn btn-warning">提交</button>

<button class="btn btn-danger">提交</button>

<button class="btn btn-default">提交</button>

<button class="btn btn-primary">提交</button>

<div class='bg-primary'>bootstrap_css_js</div>

<div class='glyphicon glyphicon-music' style="color:red"></div>

 -->

<!-- 分页组件 -->

<!-- <nav aria-label="Page navigation">

  <ul class="pagination">

    <li>

      <a href="#" aria-label="Previous">

        <span aria-hidden="true">&laquo;</span>

      </a>

    </li>

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">4</a></li>

    <li><a href="#">5</a></li>

    <li>

      <a href="#" aria-label="Next">

        <span aria-hidden="true">&raquo;</span>

      </a>

    </li>

  </ul>

</nav> -->

<!-- 栅格系统 用来布局 -->

<div class="container">

    <div class="row">

      <div class="col-md-8"><p style="background: gray">.col-md-8</p></div>

      <div class="col-md-4"><p style="background: gray">.col-md-4</p></div>

    </div>

    <div class="row">

      <div class="col-md-4"><p style="background: gray">.col-md-4</p></div>

      <div class="col-md-8"><p style="background: gray">.col-md-8</p></div>

    </div>

    <div class="row">

        <div class="col-md-4"><p style="background: pink">pink1</p></div>

        <div class="col-md-4"><p style="background: pink">pink2</p></div>

        <div class="col-md-4"><p style="background: pink">pink3</p></div>

    </div>

<!-- 表格控件 -->

<table class="table table-striped table-bordered">

        <thead>

            <tr>

                <th>用户名</th>

                <th>密码</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>username</td>

                <td>password</td>

            </tr>

            <tr class='success'>

                <td>username</td>

                <td>password</td>

            </tr>

            <tr class='info'>

                <td>username</td>

                <td>password</td>

            </tr>

            <tr class='warning'>

                <td>username</td>

                <td>password</td>

            </tr>

        </tbody>

</table>

<!-- 字体颜色 -->

<p class="text-muted">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p>

<p class="text-primary">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p>

<p class="text-success">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p>

<p class="text-info">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p>

<p class="text-warning">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p>

<p class="text-danger">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p>

<!-- 按钮样式，a标签同样适用 -->

<!-- <button class="btn btn-success">success</button> -->

<a href="http://www.baidu.com" target="_blank" class="btn btn-success">success</a>

<!-- 背景色 -->

<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>

<!-- 图片懒加载，首屏不全部显示，往下拖动才显示图片，项目地址：

https://github.com/darkwing/LazyLoad -->

<!-- <img data-src="https://www.baidu.com/img/bd_logo1.png" src="https://www.baidu.com/img/bd_logo1.png" /> -->

<p class="glyphicon glyphicon-apple" style="color: green"></p>

<!-- 图标组件，专业的网站 https://fontawesome.com/ -->

<!-- 进度条-->

<div class="progress">

  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">

    <span class="sr-only">45% Complete</span>

  </div>

</div>

<h2>第三方css动画效果库Animate.css</h2>

<button class="btn btn-success animated flash">button</button>

</div>

</body>

</html>

bootstrap结合javascript展示标签页和弹出框的示例：

<!DOCTYPE html>

<html>

<head>

  <title>javascript</title>

  <meta charset="utf-8">

  <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>

  <script src="static/bootstrap.min.js"></script>

  <link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">

</head>

<body>

<div class="container">

  <div id="jinfo" class="alert alert-success">jquery</div>

  <div id="btn1" class="btn btn-info">按钮</div>

  <!-- 标签页 -->

  <div>

    <!-- Nav tabs -->

    <ul class="nav nav-tabs" role="tablist">

      <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>

      <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>

      <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>

    </ul>

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="home">company home page</div>

    <div role="tabpanel" class="tab-pane" id="profile">profile page</div>

    <div role="tabpanel" class="tab-pane" id="messages">3</div>

    <div role="tabpanel" class="tab-pane" id="settings">4</div>

  </div>

  </div>

  <!-- 弹出框model -->

  <!-- Button trigger modal -->

  <!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#chinasoft">

    Launch demo modal

  </button> -->

  <!-- Modal -->

  <div class="modal fade" id="chinasoft" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

    <div class="modal-dialog" role="document">

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

          <h4 class="modal-title" id="myModalLabel">Modal title</h4>

        </div>

        <div class="modal-body">

          弹出框model文字内容

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

          <button type="button" class="btn btn-primary">Save changes</button>

        </div>

      </div>

    </div>

  </div>

  <button class="btn btn-success" id="showmodal">弹出modal</button>

</div>

<script type="text/javascript">

  $('#btn1').on('click', function(){

    $('#jinfo').hide(1000).show(1000);

  })

  //展示modal弹出框

  $('#showmodal').on('click', function(){

    $('#chinasoft').modal('show');

  })

</script>

</body>

</html>

bootstrap简单使用布局、栅格系统、modal标签页等常用组件入门的更多相关文章

  1. Bootstrap框架的要点--栅格系统

    不同的公司要求使用框架有所不同,而Bootstrap框架在工作中使用频次较高,其中栅格系统在这一框架中的地位不容小觑,下面我们开始聊聊它吧. 简单介绍: Bootstrap提供了一套响应式.移动设备优 ...

  2. bootstrap（一）栅格系统

    中文网:http://www.bootcss.com/ 官网:http://v3.bootcss.com/ 需要准备:离线手册  和  软件包 项目中引用bootstrap.min.js压缩版和boo ...

  3. 初学者--bootstrap（四）栅格系统----在路上（8）

    ---------------------------------------栅格系统:是bootstrap提供的响应式布局方式------------------------------------ ...

  4. bootstrap源码分析----栅格系统

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. bootstrap通过媒体查询解决不同分辨率屏幕下,页面主内 ...

  5. Bootstrap教程：[4]栅格系统详解

    http://jingyan.baidu.com/article/6f2f55a1852aa1b5b83e6c5a.html 们都知道bootstrap3.0使用了四种栅格选项来形成栅格系统,这四种选 ...

  6. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  7. Bootstrap 学习笔记2 栅格系统 辅助类下拉框

    辅助类和响应式工具: 颜色和字体相同 响应式工具: 图标菜单按钮组件: btn-group 按钮式下拉菜单

  8. Bootstrap学习js插件篇之标签页

    简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...

  9. JavaScript插件——标签页

    JavaScript插件——标签页 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html ...

随机推荐

  1. HDU 5984 数学期望

    对长为L的棒子随机取一点分割两部分,抛弃左边一部分,重复过程,直到长度小于d,问操作次数的期望. 区域赛的题,比较基础的概率论,我记得教材上有道很像的题,对1/len积分,$ln(L)-ln(d)+1 ...

  2. python socket 编程

    TCP IPv4 # server.py import socket import threading import time s = socket.socket(socket.AF_INET,soc ...

  3. python模块之序列化

    序列化 什么是序列化 序列化是将字典.列表等数据类型转化成一个字符串的过程 序列化的目的 1. 以某种存储形式使自定义对象持久化(存储) 2. 将对象从一个地方传递到另一个我地方(传输) 3. 使程序 ...

  4. 深入浅出mybatis之入门使用

    写在前面 mybatis是一个持久层框架,可以支持SQL定制和存储过程,实现数据库记录到Java POJO对象之间的映射. 所以说,mybatis是一个ORM框架. 这个ORM可以通过2种方式实现:x ...

  5. tomcat源码研究之源码导入eclipse

    版本:8.5.x官网:https://tomcat.apache.org/svn.html1. 下载源码,git镜像:https://github.com/apache/tomcat85 .2. 导入 ...

  6. Silverlight网页打开后马上崩溃，“白屏”，而且毫无提示

    如题,出现白屏的问题 在Application_UnhandledException函数内,跟踪异常e的提示信息,可以了解到如下信息: at System.ComponentModel.AsyncCo ...

  7. 将WORD2010文件标记为最终状态

    将WORD2010文件标记为最终状态 在与他人共享WORD2010文档的副本之前,可以使用“标记为最终状态”命令将文件设置为只读,防止他人对文件进行更改.在将文件标记为最终状态后,键入.编辑命令以及校 ...

  8. vue插件 使用use注册Vue全局组件和全局指令

    插件一般会注册到全局使用 官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html 全局组件: .首先建一个自定义组件的文件夹,比如叫loading,里面有一个i ...

  9. ASP.NET Web API 2 媒体类型格式化程序

    Ø  简介 在之前的ASP.NET Web API 2 消息处理管道文章中有提到,在 Web API 的生命周期中,还包含比较中要的一部分,就是媒体类型格式化程序,该程序主要用于处理 Web API ...

  10. Mac pro 装双系统 参考

    15岁觉得游泳难,放弃游泳,到18岁遇到一个你喜欢的人约你去游泳,你只好说“我不会耶”.18岁觉得英文难,放弃英文,28岁出现一个很棒但要会英文的工作,你只好说“我不会耶”.人生前期越嫌麻烦,越懒得学 ...