bootstrap4_bootstrap4 树 - CSDN
精华内容
参与话题
  • 前端组件Bootstrap4(学习笔记一)

    万次阅读 2017-11-28 14:17:41
    Hello, 大家好,今天要分享的文章仍然是关于前端的,为什么迟迟没有关于Android相关的文章呢,其实这个公众号一开始,我就有明确的表示,它不仅仅局限于Android,我希望它可以博采众长,以Android为主,其它技术为辅...

    Hello, 大家好,今天要分享的文章仍然是关于前端的,为什么迟迟没有关于Android相关的文章呢,其实这个公众号一开始,我就有明确的表示,它不仅仅局限于Android,我希望它可以博采众长,以Android为主,其它技术为辅,夹杂一些社会百态,人生杂谈,虽然看起来没有主题,但我觉得,这便是主题,起码说不单一,不乏味,你说呢?


    当然,很长时间不发Android相关的文章最大的原因是:




    哈哈~,这是逗大家的,一个Gooogle为后台的语言,我相信它的未来肯定是前途无限,好了,来看今天的主题吧——Bootstrap4。


    Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集,对于它而言,是用于开发响应式布局、移动设备优先的 WEB 项目。


    具体的安装使用,我还是建议大家,使用cdn,还是那句话,不为别的,就是为了简单,使用cdn,具体地址如下:


    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


    如果你想下载,具体下载地址可以去官网下载:https://getbootstrap.com/


    好了,下载好之后,或者使用了cdn,那么我们就可以实现我们要实现的功能了,Bootstrap4具体实现,是要把所有的标签语言放到一个容器里,就和Vue.js一样,被一个盒子封住,Bootstrap4提供了两个class,一个是全屏,一个是非全屏:


    • 1、.container 类用于固定宽度并支持响应式布局的容器。


    • 2、.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。


    有了容器,那么我们就可以在容器里写标签了,这一篇文章就先从最简单的文字排版走起。


    大标题


    未接触Bootstrap4之前,我们所写的标题都是采用h系列,即h1到h6,可是这些标题有时候我们还感觉小怎么办,当然了我们可以使用font-zize,去改变字的大小,但是,有了Bootstrap4,我们只需要设置对应的class就ok了。


    <div class="container">
       <h1 class="display-1">我是最大的字体</h1>
       <h1 class="display-1">我是第二大的字体</h1>
       <h1 class="display-3">我是第三大的字体</h1>
       <h1 class="display-4">我是第四大的字体</h1>
    </div>



    这里需要解释一下,可能刚了解的人有些许疑问,为什么display只有1-4,如果大于或者小于,会怎么样,这个问题大家可以看下源码,Bootstrap4只有这四个尺码,大于或者小于只会显示标签的默认字号,比如,你用的是h1,那么就会显示h1的尺码,对于这个class,你可以用很多标签来使用它,并不仅仅局限于h1,h系列,p,span……等都可以的。


    <div class="container">
       <p class="display-1">我是最大的字体</p>
       <span class="display-1">我是第二大的字体</span>
       <div class="display-3">我是第三大的字体</div>
       <strong class="display-4">我是第四大的字体</strong>
       <!-- ………………等 -->
    </div>


    code代码


    有时候,我们会去刻意的显示,一个代码或者标签,这里我们就可以使用code标签:


    <div class="container">
     <code>p</code>标签代表的是一个段落<br/>
     <code>div</code>是一个容器<br/>
     <code>blockquote</code>是一个块级元素
    </div>




    文本样式(加粗,倾斜,对齐样式)


    关于加粗,倾斜,等文本样式,这里我列个表,方便大家查阅:


    类名 描述
    .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轴出现滚动条


    <div class="container">
    <p class="font-weight-bold">
        我是粗体字
    </p>
    <p class="font-weight-normal">
           我是普通文本
    </p>
    <p class="font-weight-light">
           我是更细的文本
    </p>
    <p class="font-italic">
           我是斜体
    </p>
    <p class="text-left">
           我是居左的字体
    </p>
    <p class="text-center">
           我是居中的字体
    </p>
    <p class="text-right">
           我是居右的字体
    </p>
    </div>



    其它拓展(pre,kbd,abbr,mark ……)


    显示键盘快捷键,或者键盘,那么就可以使用kbd:


    <div class="container">
       <kbd>command+d</kbd><br/>
       <kbd>control+s</kbd><br/>
       <kbd>control+alt+shift</kbd><br/>
    </div>




    我想着pre在这里就不要多言了吧,毕竟它和html中的pre是一样的,作用就是显示原有的样式,下面我们看下,abbr和mark:


    <div class="container">
      <abbr title="让你看,你还真看啊">你把鼠标放到我身上就可以看到你想看到的</abbr><br/>
       <mark>我是自带光环的字体</mark>
    </div>



    总结:


    这一篇文章,是一个入门篇,主要是Bootstrap4的一些文本信息的用法,下一篇,我们就要进入,Bootstrap4用的最多的几个关键词,只要掌握了一种,那么其他的就会迎刃而解。

    展开全文
  • Bootstrap4总结

    2020-07-16 18:02:46
    #Bootstrap4总结 Bootstrap 技术Background 网页前端的一种技术,是Twitter公司发明的样式库(css). 不同的设备访问网页,网页都能完整的显示在设备屏幕上(自动适应页面)。 开发人员借助文档会使用即可。 jquery ...

    #Bootstrap4总结

    Bootstrap 技术Background

    1. 网页前端的一种技术,是Twitter公司发明的样式库(css).
    2. 不同的设备访问网页,网页都能完整的显示在设备屏幕上(自动适应页面)。
    3. 开发人员借助文档会使用即可。
    4. jquery 在Bootstrap之前,后面依赖前者的文件

    什么是 CDN?

    两种引入方式。

    1. 第一种是直接从本地文件引入;
    2. 第二种是网上引入。网上引入如果没有网络时,不显示效果。

    什么是网格系统?

    1. 屏幕分为12列,自己根据需要组合
          4-4-4    2-10 4-8    
    2. 使用div做布局的
    3. 构成要素:contionter、row、col-?

    开发时候常用的样式

    1. table 表格

    <table class="table">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
          <!--
          thead 表头
          -->
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
    </table>
    

    &NBSP; 表格形式

    .table-striped类,可以看见条纹
    加入table class=“table table-striped”
    .table-bordered类可以位表格添加边框
    加入table class=“table table-bordered”
    .table-hover 类可以为表格的每一行添加鼠标悬停效果(灰色背景)
    加入table class=“table table-hover”
    .table-responsive类用于响应式表格
    .table-responsive-sm <576px
    .table-responsive-md <768px
    .table-responsive-lg <992px
    .table-responsive-xl <1200px
    加入table-sm类来减少内边距来设置较小的表格
    加入table class=“table table-bordered table-sm”

    2.shape 形状修饰

    	<img class="rounded-circle" src="../img/太工1.jpg" width="30%" height="30%" alt="Cinque Terre">
    		<img src="../img/2.png" class="rounded-circle" alt="Cinque Ter
    

    对图片施加效果
    圆角图片
    .rounded 可以让图片显示圆角
    .rounded-circle 类可以设置椭圆形图片
    .img-thumbnail 设置土拍你缩略图 有边框
    .float-right 设置图片右对齐,.float-left左对齐
    .img-fluid类自动适应图片大小 (该类当中设置了max-width:100%、height:auto)

    3.Message prompt box

    <div class="container">
      <h2>提示框动画</h2>
      <p>.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果:</p>
      <div class="alert alert-success alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>成功!</strong> 指定操作成功提示信息。 <a href="#" class="alert-link">这条信息</a>
      </div>
     
      <div class="alert alert-warning alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>警告!</strong> 设置警告信息。
      </div>
      <div class="alert alert-danger alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>错误!</strong> 失败的操作。
      </div>
      
    </div>
    

    给提示框中加入链接
    a href="#" class=“alert-link”>这条信息/a
    关闭提示框
    div class=“alert alert-success alert-dismissible”
    button type=“button” class=“close” data-dismiss=“alert”>×</button
    &times;(x)是HTML实体字符,来表示关闭操作,而不是字母X。
    淡入淡出效果
    .fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果
    div class=“alert alert-danger alert-dismissible fade show”

    4. 按钮

    <!--按钮在a,inout,button标签中可以添加修饰-->
    <a href="#" class="btn btn-info" role="button">链接按钮</a>
    <button type="button" class="btn btn-info">按钮</button>
    <input type="button" class="btn btn-info" value="输入框按钮">
    <input type="submit" class="btn btn-info" value="提交按钮">
    <!--添加class="btn btn-outline-primary 使得按钮有颜色边框-->
    <button type="button" class="btn btn-outline-primary">主要按钮</button>
    <!-- btn-lg大按钮,btn-sm小按钮 -->
    <button type="button" class="btn btn-primary btn-lg">大号按钮</button>
    <button type="button" class="btn btn-primary">默认按钮</button>
    <button type="button" class="btn btn-primary btn-sm">小号按钮</button>
    <!--btn-block 块级按钮 占一整行-->
    <button type="button" class="btn btn-primary btn-block">按钮 1</button>
    <!-- 激活 active 禁止点击 按钮 disabled(标签中) 以及紧着点击链接(class类中)-->
    button type="button" class="btn btn-primary active">点击后的按钮</button>
    <button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
    <a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
    

    按钮在a,input,button标签中可以添加修饰
    添加class="btn btn-outline-primary 使得按钮有颜色边框
    btn-lg大按钮,btn-sm小按钮
    btn-block 块级按钮 占一整行
    激活 active 禁止点击 按钮 disabled(标签中) 以及紧着点击链接(class类中)
    按钮组在类中加入 btn-group
    按钮组设置大小 brn-group-lg/sm
    垂直按钮组 btn-group-vertical

    5. 钮组及下拉菜单

    <div class="btn-group">
      <button type="button" class="btn btn-primary">Apple</button>
      <button type="button" class="btn btn-primary">Samsung</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
           Sony
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Tablet</a>
          <a class="dropdown-item" href="#">Smartphone</a>
        </div>
      </div>
    </div>
    

    按钮组中包含三个按钮,第三个按钮是一个块级元素 加入 class=“btn dropdown-toggle” data-toggle="dropdown"则成为下拉模式
    在添加下拉菜单 dropdown-menu 与dropdown-item配合形成下拉菜单

    6. 进度条progress

    <div class="container">
    	<h2>条纹的进度条</h2>
    	<p>可以使用 .progress-bar-striped 类来设置条纹进度条:</p>
    	<!--
        	注意顔色的使用 bg-徽章
        -->
        <h2>注意颜色的使用</h2>
    	<div class="progress">
    		<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:30%"></div>
    	</div>
    	<br>
    	<div class="progress">
    		<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:40%"></div>
    	</div>
    	<br>
    	<div class="progress">
    		<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:50%"></div>
    	</div>
    	<br>
    	<div class="progress">
    		<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:60%"></div>
    	</div>
    	<br>
    	<div class="progress">
    		<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:70%"></div>
    	</div>
    </div>
    

    进度条
    条纹进度条 .progress-bar-striped类设置条纹进度条
    动画效果 .reogress-bar-animated动画效果
    进度条的进度 通过style="width:**%"控制进度条的长度

    7. 分页(paginate)

    <h1>.pagination-lg 类设置大字体的分页条目</h1>
    		<ul class="pagination pagination-lg">
    			<li class="page-item">
    				<a class="page-link disabled badge-danger" href="#">分页链接不可点击</a>
    			</li>
    			<li class="page-item active ">
    				<a class="page-link" href="#" >1 激活状态  当前页面</a>
    			</li>
    			<!--
                	<li class="badge-pill" >为间隔</li>
                	<a class="page-link badge-pill" href="#">胶囊</a>
                -->
    			<li class="page-item ">
    				<a class="page-link badge-pill" href="#">胶囊</a>
    			</li>
    			<li class="page-item">
    				<a class="page-link  badge-dark" href="#">3</a>
    			</li>
    			<li class="page-item">
    				<a class="page-link" href="#">Next</a>
    			</li>
    		</ul>
              .pagination-sm 类设置小字体的分页条目:
    		<ul class="pagination  pagination-sm">
    			<li class="page-item">
    				<a class="page-link" href="#">Previous</a>
    			</li>
    			<li class="page-item">
    				<a class="page-link" href="#">1</a>
    			</li>
    			<li class="page-item">
    				<a class="page-link" href="#">2</a>
    			</li>
    			<li class="page-item">
    				<a class="page-link" href="#">3</a>
    			</li>
    			<li class="page-item">
    				<a class="page-link" href="#">Next</a>
    			</li>
    		</ul>
    		<h3>面包屑导航</h3>
    		<h5> .breadcrumb 与.breadcrumb-item 用来设置面包屑导航</h5>
    		<ul class="breadcrumb">
    	        <li class="breadcrumb-item">
    		        <a href="#">Photos</a>
    	        </li>
    	        <li class="breadcrumb-item ">
    		        <a href="#" >普通</a>
    	        </li>
    	        <li class="breadcrumb-item active">
    		        <a href="#">高亮显示</a>
    	        </li>
    	    <li class="breadcrumb-item  ">Rome</li>
    </ul>
    

    要创建一个基本的分页可以在

      元素上添加 .pagination 类。然后在
    • 元素上添加 .page-item 类
    • ”标签中使用 :当前页码激活/高亮 .active 当前页码不可点击. disalbled

    8.列表组 list-group

    <ul class="list-group">
    	<li class="list-group-item list-group-item-success">成功列表项</li>
    	<li class="list-group-item list-group-item-secondary">次要列表项</li>
    	<li class="list-group-item list-group-item-info">信息列表项</li>
    	<li class="list-group-item list-group-item-warning">警告列表项</li>
    	<li class="list-group-item list-group-item-danger">危险列表项</li>
    	<li class="list-group-item list-group-item-primary">主要列表项</li>
    	<li class="list-group-item list-group-item-dark">深灰色列表项</li>
    	<li class="list-group-item list-group-item-light">浅色列表项</li>
            </ul>
            <h3>div 与a 标签配合 = ul与li 标签配合</h3>
           <div class="list-group">
    	<a href="#" class="list-group-item list-group-item-action">激活列表项</a>
    	<a href="#" class="list-group-item list-group-item-success">成功列表项</a>
    	<a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
    	<a href="#" class="list-group-item list-group-item-info">信息列表项</a>
    	<a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
    	<a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
    	<a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
    	<a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
    	<a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
           </div>
    

    div 与a 标签配合 = ul与li 标签配合

    9.卡片 card

    <h1 >基本的卡片样式</h1>
    		<div class="container">
    	<h2>标题、文本和链接</h2>
    	<div class="card">
    		<div class="card-body">
    			<h4 class="card-title">Card title</h4>
    			<p class="card-text">Some example text. Some example text.</p>
    			<a href="#" class="card-link">Card link</a>
    			<a href="#" class="card-link">Another link</a>
    		</div>
    	</div>
    </div>		
    <br />
    <div class="container">
    	<h2>图片卡片</h2>
    	<p>图片在头部 (card-img-top):</p>
    	<p>图片在底部(card-img-bottom):</p>
    	<h2>文字覆盖图片</h2>
    	<p>如果图片要设置为背景,可以使用 .card-img-overlay 类:</p>
    	<div class="card" style="width:400px">
    		<img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
    		<div class="card-body">
    			<h4 class="card-title">John Doe</h4>
    			<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
    			<a href="#" class="btn btn-primary">See Profile</a>
    		</div>
    	</div>
    	<br>
        <div class="container">
    	<div class="card img-fluid" style="width:500px">
    		<img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
    		<div class="card-img-overlay">
    			<h4 class="card-title">John Doe</h4>
    			<p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
    			<div id="button_bootom"><a href="#" class="btn btn-primary " ">See Profile</a></div>
    		</div>
    	</div>
    </div>
    	
    

    卡片 用于个人介绍
    通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片
    头部元素上使用 .card-title 类来设置卡片的标题 。
    .card-text 类用于设置卡片正文的内容。
    .card-link 类用于给链接设置颜色。
    图片要设置为背景,可以使用 .card-img-overlay 类
    ” 添加 .card-img-top(图片在文字上方) 或 .card-img-bottom(图片在文字下方 来设置图片卡片)

    10. 菜单 menu

    <h2>下拉菜单</h2>
            <p>如果我们想让下拉菜单右对齐,可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。</p>
            <p>.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线:</p>
    		<div class="container">
    	<div class="dropdown">
    		<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    			Dropdown link
    		</a>
    
    		<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    			<a class="dropdown-item" href="#">Action</a>
    			<a class="dropdown-item" href="#">Another action</a>
    			<a class="dropdown-item" href="#">Something else here</a>
    			<div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Another link</a>
    		</div>
    	</div>
    	    
    </div>
        <br />
           <h2>下拉弹出方向设置:用于导航栏</h2>
           <p> .dropright 类用于设置下拉菜单向右弹出:</p>
           <br />
    	</body>
    	<div class="container">
      <!-- Default dropright button -->
    	<div class="btn-group dropright">
    	  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    		Bootstrap
    	  </button>
    	  <div class="dropdown-menu">
    		<!-- Dropdown menu links -->
    		<a class="dropdown-item" href="badge_color.html">颜色</a>
            <a class="dropdown-item" href="gird2.html">网格系统</a>
            <a class="dropdown-item" href="paginate.html">分页</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="progress.html">进度条</a>
            </div>
    	</div>
    
    	<!-- Split dropright button -->
    	<div class="btn-group dropright">
    	  <button type="button" class="btn btn-secondary">
    		Bootstrap2
    	  </button>
    	  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    		<span class="sr-only">Toggle Dropright</span>
    	  </button>
    	  <div class="dropdown-menu">
    		<!-- Dropdown menu links -->
    		 <a class="dropdown-item" href="button.html">按钮</a>
             <a class="dropdown-item" href="button_group.html">按钮组</a>
             <a class="dropdown-item" href="shape.html">形状</a>
             <div class="dropdown-divider"></div>
             <a class="dropdown-item" href="#">Separated link</a>
    	  </div>
    	</div>
    </div>
    
    

    .dropdown 类用来指定一个下拉菜单
    可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。

    ” 元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item 类。
    我们也可以在 标签中使用。
    .dropdown-divider 类用于在下拉菜单中创建一个水平的分割线。
    下拉菜单向右弹出,可以在 div 元素上添加 “.dropright” 类。

    1. 折叠 callapse

    <button href="#interview" class="btn btn-primary" data-toggle="collapse">显示详细面试</button>
    		<div id="interview" class="collapse show">
    			杨凯:太原工业学院,优秀毕业生: Java工程师
    		</div>
    		<div id="accordion">
    <div class="card">
    	<div class="card-header">
    		<a class="card-link" data-toggle="collapse" href="#collapseOne">
    			选项一
    		</a>
    	</div>
    	<div id="collapseOne" class="collapse show" data-parent="#accordion">
    		<div class="card-body">
    			#1 内容:菜鸟教程 -- 学的不仅是技术,更是梦想!!!
    		</div>
    	</div>
    </div>
    <div class="card">
    	<div class="card-header">
    		<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
    			选项二
    		</a>
    	</div>
    	<div id="collapseTwo" class="collapse" data-parent="#accordion">
    		<div class="card-body">
    			#2 内容:菜鸟教程 -- 学的不仅是技术,更是梦想!!!
    		</div>
    	</div>
    </div>
    <div class="card">
    	<div class="card-header">
    		<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
    			选项三
    		</a>
    	</div>
    	<div id="collapseThree" class="collapse" data-parent="#accordion">
    		<div class="card-body">
    			#3 内容:菜鸟教程 -- 学的不仅是技术,更是梦想!!!
    		</div>
    	</div>
    

    卡片与折叠的使用
    .show 显示出来
    .collapse 类用于指定一个折叠元素 (实例中的

    12. 导航

    <a>创建一个简单的水平导航栏,可以在 <ul> 元素上添加 .nav类,在每个 <li> 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类</a>
    		<!-- 导航居中 
             <ul class="nav justify-content-center">
            -->
            <!-- 导航右对齐
            <ul class="nav justify-content-end">
            -->
            <!-- 导航垂直
            <ul class="nav flex-column">
            -->
            -->
        <h4>居中对齐</h4>
        <ul class="nav justify-content-center">
    	<li class="nav-item">
    		<a class="nav-link" href="#">Link</a>
    	</li>
    	<li class="nav-item">
    		<a class="nav-link disabled" href="#">Disabled</a>
    	</li>
    </ul>	
    <br />
     <h4>垂直导航</h4>
        <ul class="nav flex-column">
    	<li class="nav-item">
    		<a class="nav-link" href="#">Link</a>
    	</li>
    	<li class="nav-item">
    		<a class="nav-link disabled" href="#">Disabled</a>
    	</li>
    </ul>
    <br />
            <div class="container">
    	    <h2>选项卡</h2>
    	       <p>选项卡导航(nav-tabs):</p>
    	    <ul class="nav nav-tabs">
    		<li class="nav-item">
    			<a class="nav-link active" href="#">Active</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled" href="#">Disabled</a>
    		</li>
    	    </ul>
            </div>
    <br />
            <div class="container">
    	    <h2>选项卡 胶囊类型</h2>
    	       <p>选项卡导航(nav-tabs):</p>
    	    <ul class="nav nav-pills">
    		<li class="nav-item">
    			<a class="nav-link active" href="#">Active</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled" href="#">Disabled</a>
    		</li>
    	    </ul>
            </div>
            <br />
            <h3>胶囊下拉菜单</h3>
            <!--
            	<ul class="nav nav-pills">胶囊导航
            	    <li class="nav-item">
                        <a class="nav-link active" href="#">Active</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Link 1</a>
                                <a class="dropdown-item" href="#">Link 2</a>
                                <a class="dropdown-item" href="#">Link 3</a>
                            </div>
                    </li>
            	</ul>
            	nav导航 与 dropdown-menu下拉菜单 配合使用
            -->
           <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul> 
    <br />
        <h1>胶囊动态选项卡</h1>
        <div class="container">
      <h2>选项卡切换</h2>
      <br>
      <!-- Nav tabs 导航栏 -->
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
        </li>
      </ul>
    
      <!-- Tab panes -->
      <div class="tab-content " >
        <div id="home" class="container tab-pane active"><br>
          <h3>HOME</h3>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div id="menu1" class="container tab-pane fade"><br>
          <h3>Menu 1</h3>
          <p>Ut enim ad minim veniam</p>
        </div>
        <div id="menu2" class="container tab-pane fade"><br>
          <h3>Menu 2</h3>
          <p>Sed ut perspiciatis unde omnis
      </div>
    </div>
    

    创建一个简单的水平导航栏,可以在

      元素上添加 .nav类,在每个
    • 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类
      导航居中

    ” 在导航中添加 下拉菜单 “ ” 选项卡的href 与盒子中的 id 相同时,会呈现出同一个页面不同的切换效果 ### 13.导航栏 ``` 导航栏 导航栏一般放在页面的顶部。 可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 导航栏上的选项可以使用 ul 元素并添加 class="navbar-nav" 类, 然后在 li 元素上添加 .nav-item 类, a 元素上使用 .nav-link 类:

    品牌 / Logo

    使用图片,可以使用 .navbar-brand 类来设置图片自适应导航栏。


    导航栏的表单

    导航栏的表单 form 元素使用 class="form-inline" 类来排版输入框与按钮:


    导航栏使用下拉菜单

    导航栏上可以设置下拉菜单。

    Search

    Bootstrap4 面包屑导航(Breadcrumb)

    ol li与 nav a 效果相同
    ``` 导航栏一般放在页面的顶部。 可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 导航栏上的选项可以使用 ul 元素并添加 class="navbar-nav" 类, 然后在 li 元素上添加 .nav-item 类, a 元素上使用 .nav-link 类:
    1. <form>标签下配合<div>盒子制作表单 
    2. <div>中添加修饰类
    3. form-group为整行输入框
    4. form-check 复选框
    
    ### 15. 模态框 modal
    
    弹出模态框 ​ ​ 标记的属性时HTML提供的 不标记的时其他框架导入的 模态框
    打开模态框
    </body>
    
    ``` * 注意 我们一般不自己定义模态框,为了保持样式统一 ### 16. 表单的控件 - 单选 以及 复选 ``` 表单的控件 - 单选 以及 复选
    	<script type="text/javascript" src="../js/jquery.min.js" ></script>
    	<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
    	<link rel="stylesheet" href="../css/bootstrap.min.css" />
    </head>
    <body>
    	<!--
        	div 形式 不能 用radio-inline 来横向显示单选
        -->
    	<div class="radio">
    		<input type="radio" name="gender" />男
    		
    	</div>
    	<div class="radio">
    		<input type="radio" name="gender" />女
    		
    	</div>
    	<input  type="radio" />测试
    	<br />
    	<!--
            radio-inline 为单选横向放置
        -->
    	<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
        <label class="radio-inline"><input type="radio" name="optradio">Option 2</label             >
        <label class="radio-inline"><input type="radio" name="optradio" disabled>Option 3</label>
        <hr />
        
        <div class="form-group">
        	籍贯<select class="form-control">
        		<option >山西</option>
        		<option selected>河北</option>
        	</select>
        </div>
    
    </body>
    
    1.表单中 添加单选radio 添加类型 radio-inline则变为横向
    2.单选的两个选项名字一定要相同,否则不是单选
    ---
    
    展开全文
  • bootstrap4中文版入门教程

    千次阅读 2019-04-12 20:34:40
    bootstrap4中文版入门教程 欢迎访问,之前在网上没找到中文版的教程,这个整理的不错,很适合新手入门。 https://www.fengjunzi.com/tool/bootstrap4/

    bootstrap4中文版入门教程

    欢迎访问,之前在网上没找到中文版的教程,这个整理的不错,很适合新手入门。
    https://www.fengjunzi.com/tool/bootstrap4/

    展开全文
  • Bootstrap4基础入门到精通

    千人学习 2018-10-22 21:38:17
    Bootstrap的基础知识,如何安装,如何变通简易的调用讲起,逐步讲解Bootstrap中的CSS相关布局、布局组件如何调用;讲解Bootstrap相关的插件;同步实战代码和演练解说。
  • Bootstrap4中文整理版文档。收集整理的Bootstrap4文档,重新排版,支持目录索引。
  • Bootstrap4——后续

    2020-02-20 19:40:13
    1.表格也疯狂 知识点 th 表头 tr 行 td 列 上代码 <section class="bg-light text-center py-5"> <h2> 今后计划 </h2> <div class="container">...table class="table table...

    1.表格也疯狂

    知识点
       th   表头
       tr   行
       td   列
    

    上代码

    <section class="bg-light text-center py-5">
        <h2> 今后计划 </h2>
        <div class="container">
            <table class="table table-hover">
                <thead>
                   <tr>
                       <th class="text-center"> 技术 </th>
                       <th class="text-center"> 游戏 </th>
                   </tr>
                </thead>
                <tbody>
                     <tr>
                         <td> Bootstrap4 </td>
                         <td> 龙珠英雄 </td>
                     </tr>
                     <tr>
                         <td> mysql </td>
                         <td> 闪电快打 </td>
                     </tr>
                </tbody>
            </table>
        </div>
    </section>
    
    

    效果图
    在这里插入图片描述

    2.Tab菜单

    <section class="py-5">
        <h2 class="text-center"> 我爱music </h2>
        <div class="container">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a href="#out" class="nav-link active" data-toggle="tab"> 国外 </a>
                </li>
                <li class="nav-item">
                    <a href="#in" class="nav-link" data-toggle="tab"> 国内 </a>
                </li>
            </ul>
            <div class="tab-content py-3">
                <div id="out" class="tab-pane active">
                    <p> 2019年泰勒-斯威夫特很漂亮 </p>
                </div>
                <div id="in" class="tab-pane">
                    <p> 2019年邓紫棋很美 </p>
                </div>
            </div>
        </div>
    </section>
    

    菜单栏设置 active为默认显示,默认为国外,根据点击显示
    在这里插入图片描述

    3.制作页脚

    <section class="bg-light text-center py-4">
        <a href="//www.csdn.net" target="_blank" class="btn btn-primary btn-lg"> csdn学习区 </a>
        <a href="//www.4399.com" target="_self" class="btn btn-primary btn-lg"> 4399小游戏 </a>
    </section>
    <footer class="text-center text-muted py-4">
          哈哈哈哈嗝, you belong with me
    </footer>
    
    

    target=_blank 指链接在新窗口打开
    target=_self 指链接在原窗口打开
    text-muted 显示灰色字体
    footer页脚一般用于版权声明
    在这里插入图片描述

    4.制作提示框

    <section class="py-5">
        <h2 class="text-center"> 我爱Music</h2>
        <div class="container">
            <ul  class="nav nav-tabs">
                <li class="nav-item">
                    <a href="#out" class="nav-link active" data-toggle="tab"> 国外 </a>
                </li>
                <li class="nav-item">
                    <a href="#in" class="nav-link" data-toggle="tab"> 国内 </a>
                </li>
            </ul>
            
            <div class="tab-content py-3">
                <div id="out" class="tab-pane active">
                    <p> 2019年最美歌手是
                        <span class="font-weight-bold text-success" title="泰勒最美"
                        data-toggle="tooltip" data-placement="top"> 霉霉 </span> 还是 
                        <span class="font-weight-bold text-danger" title="邓紫棋最美"
                        data-toggle="tooltip" data-placement="bottom"> 邓紫棋 </span> ?会是邓紫棋吗 
                    </p>
                </div>
                <div id="in" class="tab-pane">
                    <p> 绝对是佟丽娅了,不过黄小姐也不错 </p>
                </div>
            </div>
        
        </div>
    </section>
    <script>
        $(function () {
            'use strict';
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
    
    

    菜单扩展显示
    在这里插入图片描述
    span标签中 title为提示框内容
    data-placement=top 提示框在上方
    data-placement=bottom 提示框在下方

    5.制作导航条

    知识点
       nav
       navbar
    

    代码
    注意:body包含 header,main,footer

    <header>
        <div class="container">
            <nav class="navbar navbar-expand navbar-light">
                <a href="#" class="navbar-brand"> Youku</a>
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link"> Tkh </a></li>
                    <li class="nav-item"><a href="#" class="nav-link"> Ybd </a></li>
                    <li class="nav-item"><a href="#" class="nav-link"> Yjzz </a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    

    在这里插入图片描述

    6.制作汉堡菜单

    适应各种屏幕大小
    当屏幕小的时候会收缩在汉堡里

    <header>
        <div class="container">
            <nav class="navbar navbar-expand-sm navbar-light">
                <a href="#" class="navbar-brand"> Youku</a>
                <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div id="menu" class="collapse navbar-collapse">
                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="#" class="nav-link"> Tkh </a></li>
                        <li class="nav-item"><a href="#" class="nav-link"> Ybd </a></li>
                        <li class="nav-item"><a href="#" class="nav-link"> Yjzz </a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>
    
    

    data-toggler=‘collapse’ 设置可收缩,button为选择按钮
    通过 id 来控制匹配选择。
    在屏幕大于 sm标准时和上图一样,小于时如下
    在这里插入图片描述

    7.报警提示

    知识点
       alert
       alert-*
       close
       data-dismiss='alert'
    

    上代码

    <header>
        <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible fade show">
            结束啦,舍不得你哦
            <button class="close" data-dismiss="alert">&times;</button>
        </div>
    </header>
    

    设置一个可以取消的报警提示
    在这里插入图片描述

    展开全文
  • Bootstrap4使用教程

    千次阅读 2018-11-15 16:48:50
    本篇文章写给那些第一次接触Bootstrap框架的学习者,这篇文章将从最基础最基础的Bootstrap下载开始。对Bootstrap有使用经验的同学可以忽略本篇文章。 Bootstrap下载 可以自行百度Bootstrap下载,也可以直接通过此...
  • bootstrap4 新特性

    千次阅读 2018-02-07 17:25:55
    从Less迁移到Sass: 现在,Bootstrap已加入Sass的大家庭中。得益于Libsass,Bootstrap的编译速度比以前更快; 改进网格系统:新增一个网格层适配移动设备,并整顿语义混合。 支持选择弹性盒模型(flexbox):这是项...
  • Bootstrap4笔记

    2018-09-03 17:05:28
    Bootstrap4就相當於一個css库,已经封装好了的,只要把class名改成bootstrap对应的名字,就会自动渲染css样式 移动设备优先 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 ...
  • bootstrap4

    千次阅读 2020-04-29 10:38:07
    文章目录1.... 边框颜色4. 浮动5. 响应式浮动6. 对齐7. 宽度8. 高度3. 字体4. 颜色5. 导航6. 导航栏7. 下拉菜单8. 表单控件1. input2. textarea3. 复选框(checkbox)4. 单选框(Radio)5. select下拉菜单9...
  • Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统, 可以随着设备或视口尺寸的大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的...
  • Bootstrap4 小工具

    2019-07-30 23:14:49
    一、Bootstrap4 小工具 Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。 1.1 边框 使用 border 类可以添加或移除边框: <!DOCTYPE html> <html> <head> <title...
  • bootstrap div 右对齐

    万次阅读 2015-08-11 16:06:25
    div class="col-lg-5 pull-right">div>
  • Bootstrap3和Bootstrap4区别

    万次阅读 2018-10-26 18:24:11
    Bootstrap3和Bootstrap4区别 首先引入Bootstrap3和4官网连接; Bootstrap3 VS Bootstrap4. 不同点 Bootstrap3 Bootstrap4 Less Sass语言编写 4种栅格类 5种栅格类 使用px为单位 使用rem和em为单位(除...
  • Bootstrap3 与Bootstrap4垂直水平居中

    万次阅读 多人点赞 2019-05-27 17:06:46
    Bootstrap水平居中 // 文本: class ="text-center" // 图片居中: class = "center-block" //其他元素: //bootstrap3水平居中:利用bootstrap列偏移 class = "col-md-offset-4 col-lg-offset-4col-xl-...
  • Bootstrap离线版手册本下载

    万次阅读 2014-02-27 19:56:19
    Bootstrap 教程 Bootstrap是Twitter推出的一款简洁、直观、强悍的前端开发框架。 Bootstrap基于 HTML、CSS、JAVASCRIPT。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 现在...
  • BootStrap设置footer元素在底部

    万次阅读 2017-08-29 22:33:45
    class="footer navbar-fixed-bottom "> class="container">
  • Bootstrap 4 如何自定义表格列宽度

    万次阅读 2018-08-23 08:35:30
    今天我们要一起来看一下如何使用Bootstrap 4来自定义表格的列宽度。 注意,以下的示例会使用到row,col等一系列class来完成表格宽度的自定义,所以如果觉得麻烦,也可以直接自定义css,不过这就不属于我们的讨论...
  • bootstrap checkbox 复选框

    万次阅读 2018-09-26 09:02:44
  • bootstrap所使用的图标集

    万次阅读 2018-03-08 14:18:32
    bootstrap所使用的图标集:
1 2 3 4 5 ... 20
收藏数 322,752
精华内容 129,100
关键字:

bootstrap4