Bootstrap3学习笔记

Bootstrap3简单介绍----专题1

声明:本文章是给初学bootstrap3的同学添加记忆的, 一定有非常多欠缺和不完好的地方, 希望能帮助到大家, 也希望能让很多其它的人了解boostrap并用在自己的项目中.

本文章的全部代码请大家在最新的浏览器里执行试验

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发。是一个CSS/HTML框架。

Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。包含NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

Bootstrap3(下面我就简称BT)环境搭建

从http://getbootstrap.com/getting-started/获取BT里面包括css fonts js 三个目录在HTML文件头里引入这些就OK了.

假设不想下载也能够用官方给出的CDN

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

BT网格系统

网格的意思就是把页面切割成格子依照每行分成12列(假设希望改动成24列等等能够LESS重编译自己定制). 网格系统能够依据设备的视口响应当小于767px的时候列就会垂直排列,当然列加起来等于12.以下看样例

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>Browser Show</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset='utf-8'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="shortcut icon" href="images/jigsaw.png">
        <!-- Bootstrap -->
        <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            [class *= col-] {
                background: #e8e8e8;
                border: 2px solid #000;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-8">.col-md-8</div>
            </div>
        </div>
    </body>
</html>

这里的container 是让内容在页面的中间是一个容器

排版

排版我介绍一些经常使用到的.BT的默认字体是Helvetica 假设没有最后还有sans-serif. font-size 14px line-height 20px 段落的margin-bottom 10px

设置段落颜色代表不同语义

<p class="text-warning">warning</p>
<p class="text-info">info</p>
<p class="text-success">success</p>

表格

BT3中有4种表格的样式各自是table-striped 条纹背景

table-bordered 带边框的

table-hover 鼠标放上带高亮的

table-condensed 紧凑型表格

以下是代码演示

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>Browser Show</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset='utf-8'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="shortcut icon" href="images/jigsaw.png">
        <!-- Bootstrap -->
        <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        
    </head>
    <body>
        <div class="container">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>name</th>
                        <th>ID</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>name</th>
                        <th>ID</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>name</th>
                        <th>ID</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th>name</th>
                        <th>ID</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                    <tr>
                        <td>mike</td>
                        <td>123</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

也能够给每一行加入颜色有3中样式 success warning info 这个上面已经介绍过了和段落的一样

表单

BT3提供的表单能够让输入框圆角, 选中的时候会有蓝色光晕等

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>Browser Show</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="images/jigsaw.png">
    <!-- Bootstrap -->
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
            <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

</head>

<body>
    <div class="container">
        <div class="row">
            <form role="form">
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>

        </div>
    </div>
</body>

</html>

这里注意的是.最好将输入框放到form-group中为了增强搜索引擎的阅读必须有label标签可是怎样不让其显示能够加入.sr-only

水平排列的表单能够给form 加入form-horizontal类

能够通过input-lg input-sm控制输入框的高度宽度是利用网格系统col-md-xx 来控制的

<form role="form">
     <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
             <input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Enter email">
      </div>
</form>

能够再输入框的前面加入一些提示标记

<div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Enter email">
    </div>
  </div>

button

BT3提供了.7中button的样式不同颜色也提供4种button的大小当中一种是btn-block 这个意思就是让button充满整个行

请看代码

    <button type="button" class="btn">button</button>
    <button type="button" class="btn btn-primary btn-lg">button</button>
    <button type="button" class="btn btn-info btn-sm">button</button>
    <button type="button" class="btn btn-success btn-xs">button</button>
    <button type="button" class="btn btn-warning btn-block">button</button>
    <button type="button" class="btn btn-danger">button</button>
    <button type="button" class="btn btn-link">button</button>

学习BT组件请看本博客的BT学习-----2

相关阅读:
为什么winform的窗体不显示设计化界面的原因
 IIS URLRewrite vue单页应用程序（history模式）
Vue CLI 4.5.7 脚手架项目的搭建、目录结构分析、Vue Router的基本使用
 googleapi | google爬虫
 payload里base64编码执行后不成功
 子域名爬取alienvault站点爬虫
 rapiddns | rapiddns子域名爬虫脚本
 python批量获取oneforall报告文件中域名的脚本
 爬取bing网页的脚本
 子域名爬取fullhunt站点爬虫
原文地址：https://www.cnblogs.com/mengfanrong/p/5186095.html