码迷,mamicode.com
首页 > 其他好文 > 详细

【Bootstrap简单用法】

时间:2018-01-03 22:37:35      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:icons   尺寸   src   str   设备   reg   nbsp   引入   fling   

一、下载及使用

参考网站:http://www.bootcss.com/

 

1、使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议)

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 

2、预编译版

下载压缩包之后,将其解压缩到任意目录即可看到以下(压缩版的)目录结构:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

 

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>


<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-4">
     <table class="table table-bordered table-hover">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>班级</th>
                <th>操作</th>
            </tr>

             <tr class="danger">
                <td>张三</td>
                <td>23</td>
                <td>s19</td>
                <td><button class="btn-sm btn-danger">删除</button></td>
            </tr>
             <tr class="info">
                <td>李四</td>
                <td>23</td>
                <td>s18</td>
                 <td><button>删除</button></td>
             </tr>
             <tr class="default">
                <td>王五</td>
                <td>28</td>
                <td>s19</td>
                <td><button>删除</button></td>
            </tr>
</table>
        </div>
    </div>
</div>






<script src="jquery-3.1.1.js"></script>
<script>
   $("button").click(function () {
       console.log($(this));
       $(this).parent().parent().remove()
   })

</script>
</body>
</htm
demo

 

二、栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

 

【Bootstrap简单用法】

标签:icons   尺寸   src   str   设备   reg   nbsp   引入   fling   

原文地址:https://www.cnblogs.com/smallmars/p/8184069.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!