<!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. THE DEFINITIVE GUIDE TO DEBUGGING JAVASCRIPT

    FIGURING OUT WHERE THE ERROR COULD BE READ THE CODE USING THE CONSOLE THE CHROME DEV TOOLS THE DEBUG ...

  2. python学习路线--从入门到入土

    入门技术博客 进阶自己挑选 入门基础 Python入门相对容易又可以干很多事(网站,运维,数据,爬虫等),是一门方便的工具语言.2016年TIOBE排名显示Python已经名列第四,成为脚本语言之首. ...

  3. GIT与SVN的比较

    Git: 1. 分布式版本控制2. 不需要网络,本地就可以操作版本控制3. 可以是公用的,可以分享4. 不依赖于中央服务器,即使服务器有问题也不会有影响5. 传输方式不一样,git要比svn快很多6. ...

  4. 细说tomcat之类加载器

    官网:http://tomcat.apache.org/tomcat-7.0-doc/class-loader-howto.htmlJava类加载与Tomcat类加载器层级关系对比 Java Clas ...

  5. 在ServiceModel客户端配置部分中，找不到引用协定“”的默认终结点元素

    鄙人自己写了一个读取文件的ASP.NET服务,在Silverlight工程中添加服务引用(名字为FileIOService)后,出现了如上的错误. 出错原因:服务是在项目B中调用的,但是主项目是A,所 ...

  6. MyEclipse2017 隐藏回车换行符

    Preferences->Text Editor->Show Whitespace characters(configure visibility)->Transparency Le ...

  7. electron-vue：Vue.js 开发 Electron 桌面应用

    相信很多同学都知道 Electron 可以帮助开发人员使用前端技术开发桌面客户端应用,今天介绍的 electron-vue 框架是一套基于 Vue.js 开发 Electron 桌面应用的脚手架,该项 ...

  8. 三、文件IO——系统调用（续）

    3.2.4 read 函数--- 读文件 read(由已打开的文件读取数据) #include<unistd.h> ssize_t read(int fd, void * buf, siz ...

  9. BN_batch normalization

    参考: https://zhuanlan.zhihu.com/p/27938792 做法 设,每个batch输入是 (其中每个 都是一个样本, 是batch size) 假如在第一层后加入Batch ...

  10. Maven项目配置logback

    首先,在pom.xml中加入maven依赖 <!-- log start --> <dependency> <groupId>org.slf4j</group ...