BootStrap 快速入门

权与力?你也信奉权与力么?很好,你比他们更懂规矩。但是信奉这规则的人也必为这个规则付出代价。

首先下载BootStrap4.X,下载好后有三个文件夹,css-js-font分别是CSS样式,JavaScript脚本和font字体。

需要注意的是Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以你先下载JQuery,jqery的文件放在js文件夹里面,然后把JQuery导入在底部,但是要导入在BootSrtap的js脚本前面。

下载地址

栅格

栅格是用来分割页面用的,让每个作用都独立成块或者区域。

在主目录创建8.1的文件夹,里面新建一个index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BootStrap栅格测试</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div class="col-md-3">小桃红爱吃秋刀鱼~~小桃红爱吃秋刀鱼~~小桃红爱吃秋刀鱼~~</div>
<div class="col-md-3">但是秋刀鱼只有秋天才有~~但是秋刀鱼只有秋天才有~~但是秋刀鱼只有秋天才有~~</div>
<div class="col-md-3">不能吃秋刀鱼了~~不能吃秋刀鱼了~~不能吃秋刀鱼了~~</div>
<div class="col-md-3">罢了罢了不吃就不吃~~罢了罢了不吃就不吃~~罢了罢了不吃就不吃~~</div>
<!--col是column的意思,就是列,md就是medin中等,还有sm属性,3就是主页面分成4份,因为默认是分成12分-->
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
</html>

效果如下:

在标签里面加上段落或者标题都适用同一个样式。比如:

<h1>主标题</h1>
<div class="col-md-3">小桃红爱吃秋刀鱼~~小桃红爱吃秋刀鱼~~小桃红爱吃秋刀鱼~~</div>

表单

基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

1. 向父 <form> 元素添加 role="form"。必要时可以改变 rows 属性(较少的行 = 较小的盒子,较多的行 = 较大的盒子),在input的输入中填写rows=3。
2. 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。class .form-group是表单组,当然还有input-group等等
3. 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。如果想让输入框变大变小变漂亮使用class .input-sm和lg
4. 在一个容器中,你在添加一些新的属性比如输入框,输入框会与这个容器存在边距,此时只要使用一个div标签把输入框包围起来,div使用的样式是class .row
5. 除了row还有well样式,一般用来把按钮组包围起来,well的作用是弄一个大边距出来,就像p标签一样

HTML代码,作用写在注释里面了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BootStrap栅格测试</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<form class="container">
    <!--container是BootStrap定义的容器,一般适用于表单-->
    USERNAME:<input type="text" class="form-group">
    <!--form-group的输入框是普通的输入框-->
    <br>
    PASSWORD:<input type="password" class="form-control">
    <!--form-control的输入框是长输入框,但会在效果演示可以看到-->
    <br>
    <button type="button">Login</button>

</form>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
</html>

效果如下:

在input中的type类型选择datatime-local可以变成选择时间

PASSWORD:<input type="datetime-local" class="form-control">

效果如下

如需要两个输入框都在同一行显示,在一个div标签使用class=”form-inline”,然后把要放在同一行的内容放在这个div标签里面。

关于表格中的下拉选择栏

link rel="stylesheet" href="../css/bootstrap.css">
<select class="form-group">
    <option value="1">小桃红</option>
    <option value="2">大桃红</option>
    <option value="3">老大桃红</option>
</select>

效果如下

如果要让代码显示高亮蛮实用bootstrap自带的has-error(红色),has-success,has-warning(黄色),写在div中。

<div class="form-control has-success">
....
</div>

如果使用容器container的话,这个标签里面的内容一般都会居中显示

<div class="container"></div>

如果想让输入框前面加上一些特定的字符,或者你的输入名直接在输入框里面

<div class="input-group">
    <div class="input-group-addon">输入一些东西:</div>
        <input type="text" class="form-control">
</div>

效果如下

如果想让container容器边上自带的边距去除的话,只需复写 container样式 padding-left:0px 和padding-right:0px; 然后在该容器子元素 row复写样式 .row{margin:0};即可

按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:

Class    描述
btn    默认的/标准的按钮。
btn-primary    提供额外的视觉效果,标识一组按钮中的原始动作。
btn-success    表示一个成功的或积极的动作。
btn-info    信息警告消息的上下文按钮。
btn-warning    表示应谨慎采取的动作。
btn-danger    表示一个危险的或潜在的负面动作。
btn-link    并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为。

按钮样式

HTML代码

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮选项</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

</body>
</html>

效果如下

除了button标签,还有a标签和input标签也可以使用class .btn btn-*的样式

<a class="btn btn-primary" href='http://www.langzi.fun'>请给我跳转到一个帅逼的网站</a>

还有input标签也可以

<input class="btn btn-primary" type='submit' value='点我'>

注意,只要是input标签,类型是submit的话,按钮的值就要写在内部的value里面。

按钮大小

Class    描述
.btn-lg    这会让按钮看起来比较大。
.btn-sm    这会让按钮看起来比较小。
.btn-xs    这会让按钮看起来特别小。
.btn-block    这会创建块级的按钮,会横跨父元素的全部宽度。
<button disable="disable"></button>这样按钮就变成不可选

html代码

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮大小</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<p>
   <button type="button" class="btn btn-primary btn-lg">
      大的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-lg">
      大的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary">
      默认大小的原始按钮
   </button>
   <button type="button" class="btn btn-default">
      默认大小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-sm">
      小的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-sm">
      小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-xs">
      特别小的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-xs">
      特别小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg btn-block">
      块级的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-lg btn-block">
      块级的按钮
   </button>
</p>

</body>
</html>

效果如下:

按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class,下面将进行详细讲解。

激活状态

按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。

下表列出了让按钮元素和锚元素呈激活状态的 class:

元素    Class
按钮元素    添加 .active class 来显示它是激活的。
锚元素    添加 .active class 到 <a> 按钮来显示它是激活的。

html代码

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮激活状态</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<p>
   <button type="button" class="btn btn-default btn-lg ">
      默认按钮
   </button>
   <button type="button" class="btn btn-default btn-lg active">
      激活按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按钮
   </button>
   <button type="button" class="btn btn-primary btn-lg active">
      激活的原始按钮
   </button>
</p>

</body>
</html>

效果如下:

图像

Bootstrap 提供了三个可对图像应用简单样式的 class:

1. .img-rounded:添加 border-radius:6px 来获得图像圆角。
2. .img-circle:添加 border-radius:500px 来让整个图像变成圆形。
3. .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。

html代码

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 图像</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<img src="img/download.png" 
   class="img-rounded">
<img src="img/download.png" 
   class="img-circle">
<img src="img/download.png" 
   class="img-thumbnail">

</body>
</html>

效果如下:

在bootstrap中要使图片具有响应式功能,须给图片加上类 .img-responsive ,要让图片在具有响应式功能的同时还剧中显示的话需要加入类 center-block

轮播图

<div id="myCarousel" class="carousel slide">
    <!-- 轮播(Carousel)指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 轮播(Carousel)项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播(Carousel)导航 -->
    <a class="carousel-control left" href="#myCarousel" 
       data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
    <a class="carousel-control right" href="#myCarousel" 
       data-slide="next">&rsaquo;</a>
</div>

按钮组

让几个按钮连在一起的代码

 <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.css">

<div class="well">
    <div class="btn-group">
        <button class="btn btn-default">按钮</button>
        <button class="btn btn-default">按钮</button>
        <button class="btn btn-default">按钮</button>
    </div>
</div>

效果如下

按钮组的大小

<div class="btn-group btn-group-lg">xxx</div>

lg代表大的,依次往下的是sm和xs。

让按钮垂直显示

<div class="btn-group-vertical">xxx</div>

让多个按钮组在同一行显示

<div class='btn-toolbar'> 
<div class='btn-group btn-group-sm'>
<div class='btn btn-default'>点我</div>
<div class='btn btn-default'>点我</div>
</div>    <div class='btn-group btn-group-sm'>
<div class='btn btn-default'>点我</div>
<div class='btn btn-default'>点我</div>
</div>
</div>

导航

bootstrap中和导航相关的类都是字母nav,创建一个默认的导航栏的步骤如下:

1. 向 <nav> 标签添加 class .navbar、.navbar-default。
2. 向上面的元素添加 role="navigation",有助于增加可访问性。
3. 向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
4. 为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。使用ul和li标签
5. nav用户局部的导航,而navbar用于整站的导航 

html代码

 <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.css">
 <ul class="nav nav-tabs">
<li><a href="#" >登录</a> </li>
<li class="active"><a href="#" >注册</a> </li>
<li><a href="#" >忘记密码</a> </li>
</ul>

效果如下

是不是感觉太靠近边框了,不好看?没事自己写个样式调个边框出来。

html代码

<meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.css">
<style>
    body{
        max-width: 600px;
        margin: 20px auto;
    }

</style>
<body> <ul class="nav nav-tabs">
<li><a href="#" >登录</a> </li>
<li class="active"><a href="#" >注册</a> </li>
<li><a href="#" >忘记密码</a> </li>
</ul></body>

效果如下

正儿八经的全局导航栏

html代码

<meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.css">

<div class="navbar navbar-default">
<div class="navbar-header">
    <a class="navbar-brand" href="http://www.langzi.fun">浪子国际</a>
</div>
    <ul class="nav navbar-nav">
        <li><a href="http://www.langzi.fun/index.html">首页</a></li>
        <li><a href="http://www.langzi.fun/categories/">分类</a></li>
        <li><a href="http://www.langzi.fun/tags/">标签</a></li>
    </ul>
</div>

效果如下

如果想让整个导航栏向右边浮动的话

<div class="nav navbar-nav navbar-right">xxx</div>

如果想让整个导航栏居中显示,可以使用container容器把他们包围住即可

如果想让导航栏可以搜索,加一个搜索框试一下

<meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.css">

<div class="navbar navbar-default">
<div class="navbar-header">
    <a class="navbar-brand" href="http://www.langzi.fun">浪子国际</a>
</div>
    <ul class="nav navbar-nav">
        <li><a href="http://www.langzi.fun/index.html">首页</a></li>
        <li><a href="http://www.langzi.fun/categories/">分类</a></li>
        <li><a href="http://www.langzi.fun/tags/">标签</a></li>
    </ul>
    <form class="navbar-form">
        <div class="form-group">
            <input type="text" class="form-control">
        </div>
        <button type="submit" class="btn btn-default">点击</button>
    </form>
</div>

效果如下

如果想让搜索栏在右边的话

<form class="navbar-form navbar-right">

如果想让导航栏内容垂直排序

<div class="nav-stacked">

如果想让导航栏里面内容平均分布

<div class="nav-justifie">

面板

面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板,只需要向

元素添加 class .panel 和 class .panel-default 即可

<meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.css">
<div class="panel panel-default">
   <div class="panel-heading">
      今日访问信息
   </div>
    <div class="panel-body">
         访客数据
    </div>
        <div class="panel-footer">
         访客男女比例
    </div>
</div>

效果如下

panel除了body,heading外还有title

当然面板的主题颜色是可以改变的

<div class="panel panel-default">
<div class="panel panel-warning">
<div class="panel panel-info">
<div class="panel panel-success">
<div class="panel panel-danger">
<div class="panel panel-primary">

为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table。假设有个

包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的
,则组件会无中断地从面板头部移动到表格。

<meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.css">
<div class="panel panel-primary">
   <div class="panel-heading">
      今日访问信息
   </div>
    <div class="panel-body">
         访客数据
           <table class="table">
      <th>时间</th><th>人数</th>
      <tr><td>上半夜</td><td>200</td></tr>
      <tr><td>下半夜</td><td>400</td></tr>
   </table>
    </div>
        <div class="panel-footer">
         访客男女比例
                       <table class="table">
      <th>男女人数</th><th>人数</th>
      <tr><td>男</td><td>0</td></tr>
      <tr><td>女</td><td>500000</td></tr>
   </table>
    </div>
</div>

效果如下

因为用到了表格,这里直接提起一些表格是相关知识

表格颜色

<tr class="active">
<tr class="success">
<tr  class="warning">
<tr  class="danger">

响应式表格

<div class="table-responsive">
<table class="table">
xxx
</table>
</div>

表格带边框

<table class="table table-bordered">
<tr>xxx</tr>
<td>xx</td>
</table>

表格背景色每行不一样

<table class="table table-striped">
<tr>xxx</tr>
<td>xx</td>
</table>

在面板中显示列表

<meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.css">
<div class="panel panel-primary">
   <div class="panel-title">
      今日气运
   </div>
    </div>
        <div class="panel-footer">
         <div class="list-group">
             <li class="list-group-item">发财</li>
             <li class="list-group-item">有钱</li>
             <li class="list-group-item">一夜暴富</li>
         </div>

    </div>

效果如下

字体

.small text-muted   更加小浅的字体
.font-weight-bold    加粗文本    
.font-weight-normal    普通文本    
.font-weight-light    更细的文本    
.font-italic    斜体文本    
.lead    让段落更突出    尝试一下
.small    指定更小文本 (为父元素的 85% )    
.text-left    左对齐    
.text-center    居中    
.text-right    右对齐    
.text-justify    设定文本对齐,段落中超出屏幕部分文字自动换行    
.text-nowrap    段落中超出屏幕部分不换行    
.text-lowercase    设定文本小写    
.text-uppercase    设定文本大写    
.text-capitalize    设定单词首字母大写
.initialism    显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母    
.list-unstyled    移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)    
.list-inline    将所有列表项放置同一行    
.pre-scrollable    使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

更多字体样式参考这里

分页

<meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <ul class="pagination">
      <li><a href="#">&laquo;</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="#">&raquo;</a></li>
    </ul>

效果如下

与分页链接一样,翻页也是无序列表。默认情况下,链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。

<ul class="pager">
  <li><a href="#">上一页</a></li>
  <li><a href="#">下一页</a></li>
</ul>

最后一页

<li class="previous disabled"><a href="#">下一页</a></li>

这样就不能点击了,除了disabled还有active高亮显示,

  • 面包屑导航

    <ol class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">2013</a></li>
      <li class="active">十一月</li>
    </ol>
    

    如下

    标签

    <span class="label label-default">默认标签</span>
    <span class="label label-primary">主要标签</span>
    <span class="label label-success">成功标签</span>
    <span class="label label-info">信息标签</span>
    <span class="label label-warning">警告标签</span>
    <span class="label label-danger">危险标签</span>
    

    如下

    参考链接

    参考链接

    坚持原创技术分享,您的支持将鼓励我继续创作!
    ------ 本文结束 ------

    版权声明

    LangZi_Blog's by Jy Xie is licensed under a Creative Commons BY-NC-ND 4.0 International License
    由浪子LangZi创作并维护的Langzi_Blog's博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
    本文首发于Langzi_Blog's 博客( http://langzi.fun ),版权所有,侵权必究。

    0%