Bootstrap使用笔记

逐步更新

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。是一个 CSS,HTML 和 JS 的集合,为Web 开发提供了模板。

Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
Bootstrap自带:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。

下载

https://getbootstrap.com/docs/4.5/getting-started/download/两个文件夹:css和js,分别为样式文件和js脚本

BootStrap之栅格系统 网格系统

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。通过一系列的行(row)与列(column)的组合创建页面布局

使用规则

行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
使用行来创建列的水平组,列数之和不能超过平分的总列数,比如12。
内容应该放置在列内,且唯有列可以是行的直接子元素。
通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响
举例:

<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 class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-5">.col-md-5</div>
            <div class="col-md-3">.col-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-5">.col-md-5</div>
            <div class="col-md-5">.col-md-5</div>
            <div class="col-md-2">.col-md-2</div>
        </div>
    </div>

用法总结

<small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)。

下拉菜单
<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>
导航栏

标签添加 class .navbar、.navbar-default。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>

    <div>

        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">提交按钮</button>
        </form>
        <button type="button" class="btn btn-default navbar-btn">
            导航栏按钮
        </button>

        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
导航元素

使用相同的标记和基类.nav .nav-tabs .nav-pills .nav-stacked分别为“无序列表”,“标签式的导航”,“胶囊式的导航菜单”,“堆叠式”,可结合下拉菜单得更多的导航。

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>
Categories: Web

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *