[Bootstrap]7天深刻Bootstrap(4)CSS組件

時間  2019-11-11
標籤 bootstrap 7天 深刻 css 組件 欄目 Bootstarp 简体版
原文   原文鏈接

Bootstrap框架的三大核心之二：組件。 組件也是最核心的地方，由於絕大部分的網頁都必須利用組件才能構建出絢麗的頁面。javascript

組件包括：Icon圖標（Glyphicon）、 下拉菜單（Dropdown）、按鈕組（Button group）、按鈕下拉菜單（Button dropdown）、輸入框組（Input group）、導航 （Nav）、導航條（Navbar）、麪包屑導航（Breadcrumb）、分 頁導航（Pagination）、標籤（Label）、徽章（Badge）、大屏幕 展播（Jumbotron）、頁面標題（Pageheader）、縮略圖 （Thumbnail）、警告框（Alert）、進度條（Progress bar）、媒 體對象（Media object）、列表組（Listgroup）、面板（Panel） 和窪地（Well），總計20種。css

 

本節目錄html

 

全部組件java

小圖標web

小圖標（icon）是一個優秀網站不可缺乏的一組元素，小圖標的點綴可使網站瞬間提高一個檔次。bs提供了 200個小圖標。bootstrap

使用的時候必須同時使用兩個樣式，即.glyphicon和以.glyphicon-*開頭的樣式。api

新版icon就是利用@font-face特性，並結合必定的字體， 來製做Web頁面中的icon圖標。瀏覽器

 

優勢框架

這種形式不只可讓字體無損失放大，還能夠簡單地經過color: #ff0的形式設置圖標的顏色。ide

 

2種使用方式

<span class="glyphicon glyphicon-glass text-danger" style="font-size: 50px;"></span>
<i class="glyphicon glyphicon-glass text-success"></i>

　　

3種場景使用場景

button、li、input-group

 

擴展

圖標是利用字體和content屬性來實現的，因此下面這2個是等效的

<span class="glyphicon glyphicon-glass"></span>
<span class="glyphicon">&#xe001</span>

 

下拉菜單

使用

.dropdown樣式是大容器，.dropdown-menu是菜單li元素的容器，而.divider樣式在li元素上的顯示效果是分隔符。

因爲menu樣式中設置display:none，經過設置open樣式，能夠打開菜單。

菜單標題，經過設置.dropdown-header樣式能夠設置標題。

支持active和disabled

 

多級菜單

在bs3.x版本默認是沒有多級菜單的，在bs2.x中有，若是要使用，先添加擴展樣式

.dropdown-submenu {
    position: relative; /* 相對定位 */
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%; /* 右側開始對齊 */
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

.dropup .dropdown-submenu > .dropdown-menu {
    top: auto;
    bottom: 0; /* 向上方向 */
    margin-top: 0;
    margin-bottom: -2px;
    -webkit-border-radius: 5px 5px 5px 0;
    -moz-border-radius: 5px 5px 5px 0;
    border-radius: 5px 5px 5px 0;
}

.dropdown-submenu > a:after {
    display: block;
    float: right;
    width: 0;
    height: 0;
    margin-top: 5px;
    margin-right: -10px;
    border-color: transparent;
    border-left-color: #cccccc; /* 三角符號設置*/
    border-style: solid;
    border-width: 5px 0 5px 5px;
    content: " ";
}

.dropdown-submenu:hover > a:after {
    border-left-color: #cccccc; /* 鼠標移動時的三角符號設置*/
}

.dropdown-submenu.pull-left {
    float: none; /* 取消子菜單的向右浮動 */
}

    .dropdown-submenu.pull-left > .dropdown-menu {
        left: -100%; /* 向右浮動的時候，子菜單應該從最左側開始對齊計算 */
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
    }
.dropdown-submenu

而後在菜單項上添加dropdown-submenu樣式。

 

一個簡單的多級菜單

<div class="dropdown open">
            <ul class="dropdown-menu">
                <li><a>個人積分</a></li>
                <li><a>個人流量</a></li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                    <a>我的中心</a>
                    <ul class="dropdown-menu">
                        <li><a>個人積分</a></li>
                        <li><a>個人流量</a></li>
                        <li class="divider"></li>
                        <li><a>我的中心</a></li>
                    </ul>
                </li>
            </ul>
</div>

 

 

按鈕組

只須要在多個 按鈕外部使用一個容器元素（好比div），而後在容器元素上應用.btn-group樣式便可.

按鈕工具欄主要是將多個按鈕組排列在一塊兒，工具欄是一個容器，在容器元素上應用.btn-toolbar樣式。

支持lg、sm尺寸樣式

垂直分組.btn-group-vertical

.btn-group-justified樣式提供了一個特殊的功能，就是在一個.btn-group容器上，若是使用了該樣式，則全部的按鈕都會 100%充滿容器元素。

 

按鈕下拉菜單

下拉菜單須要知足一個特殊的需求，那就是必須有position: relative.(而.dropdown、btn-group樣式正好都有該屬性)

組合下拉菜單

 

分離下拉菜單(實際上就是加一個單獨按鈕。)

 

向上彈起的

只須要在容器上加上dropup樣式便可

<div class="btn-group dropup">
                <a href="#" class="btn btn-default">
                    向上彈起
                </a>
                <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">1111111</a></li>
                    <li><a href="#">2222222</a></li>
                </ul>
</div>
向上彈起

 

 

輸入框組

只須要在容器上應用.input-group樣式，而後對須要在input先後顯示的個性元素上應用.input-group-addon樣式。

在.input-group-addon樣式裏，不只能夠放置label和icon，也能夠放置複選框（checkbox）和單選框（radio）。

支持lg，sm尺寸樣式。

按鈕做爲addon，因爲btn樣式自己就有大小顏色內外邊距樣式。.btn樣式又單獨設置了一 個.input-group-btn樣式

擴展:

  1. 請儘可能避免在select元素上使用該功能，由於WebKit瀏覽器 不徹底支持input-group組件的特性。
  2. 不要直接將.input-group和.form-group混合使用，因 爲.input-group是一個獨立的組件。
  3. 若是讓icon融爲一體，記得第3節中的feedback功能

 

導航

設置容器樣式，便可實現不一樣的導航效果

選項卡導航是最經常使用的一種導航方式，尤爲是在多內容編輯的時候，須要經過選項卡進行分組顯示

選項卡導航：nav nav-tabs

膠囊式導航：nav nav-pills

垂直導航： nav nav-pills nav-stacked　　(nav-tabs垂直導航效果老版本v2.x系列能夠，3.x新版本不能夠)

自適應導航：nav nav-pills nav-justified　　nav nav-tabs nav-justified

 

導航條

基礎導航條是在普通導航的基礎上進行改進實現的，但實現原理複雜得多

首先在普通導航的 ul元素上應用.navbar-nav樣式，而後在外部父元素容器上應用.navbar樣式以及.navbar-default樣式便可實現。

navbar-brand樣式的連接，表示該元素是導航條的名稱，起到提醒的目的

基礎導航條

<nav class="navbar navbar-default">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Never、C</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li>
                <a href="#" data-toggle="dropdown">Center<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a>11111111</a></li>
                    <li><a>22222222</a></li>
                    <li class="divider"></li>
                    <li><a>11111111</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
        </ul>
</nav>
基礎導航條

 

導航條中的表單navbar-form

<nav class="navbar navbar-default">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Never、C</a>
        </div>
        <form class="navbar-form pull-left">
            <div class="form-group">
                <input type="text" class="form-control" name="name" value="" placeholder="Search" />
            </div>
            <a href="#" class="btn btn-default">Submit</a>
        </form>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
</nav>

本質navbar-form設置爲inline-block效果，pull-left左浮動效果。

 

固定

提供了兩個強有力的樣式支持這一特性，分別是：.navbar-fixed-top支持最頂部固定，.navbar-fixedbottom支持最底部固定。

 

響應式導航條

屏幕大小的分界點是768像素， 在小於768像素的時候，全部的菜單默認會隱藏，單擊右邊的icon圖標，全部默認的菜單就會展現出來

使用

右上角的button圖標（icon）必須包含在.navbar-toggle樣式 裏

默認隱藏收縮的代碼都 在一個樣式爲.navbar-responsive-collapse的div裏，而且該div應用了navbar-collapse和collapse兩個樣式。

    <nav class="navbar navbar-default">
        <div class="navbar-header">
            <!-- .navbar-toggle樣式用於toggle收縮的內容,即：collapse樣式所在的元素-->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--確保不管是寬屏仍是窄屏，navbar-brand都會顯示 -->
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- 屏幕寬度小於768像素時，該div內的內容默認都會隱藏（經過單擊icon-bar所在的圖標，能夠再展開）；大於768像素時默認顯示 -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">主頁</a></li>
                <li><a href="#">做品</a></li>
                <li><a href="#">圖書</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜單 <b class="caret"></b></a>                <ul class="dropdown-menu">                    <li><a href="#">子菜單1</a></li>                    <li><a href="#">子菜單2</a></li>                    <!--省略菜單 -->                </ul>
                </li>
            </ul>
        </div>
</nav>
響應式導航條

 

麪包屑導航

麪包屑（Breadcrumb）通常用於導航，表示當前頁面所在的位置（或功能插件）。

在容器上（通常爲ul）添加breadcrumb類便可。

 

分頁導航

一個用戶體驗良好的分頁組件會獲得訪問用戶的良好評價。bs爲你們提供了兩種分頁組件，一種是帶多個頁碼的組件（pagination），一種是隻有上一頁、下一頁的翻頁組件 （pager）。

實際上pager加了居中效果，pagination實現相似btn-group效果

 

標籤

在網頁排版的時候，咱們常常要高亮一些標題裏的特殊字符或者整個字符， bs供了一個.label樣式用於實現高亮的功能。

label支持5種基本顏色和1個默認灰。

<span class="label label-info">info</span>

 

徽標

在開發交互式系統或者信息系統時，常常要顯示一些最新收到的消息、須要有多少審批的消息等。Bootstrap的.badge樣式提 供了很好的效果，只須要在span或者label上應用該樣式便可

.badge樣式有個遺憾就是，它沒有定義多風格顏色的設定。

使用如下擴展樣式，便可實現4種基本顏色

.badge-danger {
    background-color: #d9534f;
}

.badge-success {
    background-color: #5cb85c;
}

.badge-warning {
    background-color: #f0ad4e;
}

.badge-info {
    background-color: #5bc0de;
}
badge color

 

大屏

在設計網頁佈局的時候，常常會有一些大屏（或大塊頭）內容的顯示，.jumbotron樣式提供的展現效果正是咱們所須要的。

在.jumbotron內部應用h1和p元素時，這兩種元素也會進行相應的調整。

若是jumbotron放在container樣式內，則顯示圓角；若是不放在裏面，就不會顯示圓角。而通常咱們會在大屏裏面套一個容器。

        <div class="jumbotron">
            <div class="container">
                <h1>Hello World</h1>
                <p>.Net ......</p>
                <p><a href="#" class="btn btn-primary">Learn</a> </p>
            </div>
        </div>

　　

 

縮略圖

結合12柵格系統，並使用.thumbnail樣式，能夠將圖像、視頻、文本展現得更加漂亮。

縮略圖有兩種使用方式，一種 用於僅顯示圖片，另一種利用容器將圖片和標題顯示在一塊兒。

能夠在.caption樣式的元素容器內，添加任意風格的元素，好比按鈕、連接等。本質加了個padding和color。

將如下內容放置一個row中，則會在大屏下一行顯示3個，中屏顯示2個，小屏顯示1個

<div class="col-md-6 col-lg-4">
                <div class="thumbnail">
                    <img src="url" alt="Alternate Text" />
                    <div class="caption">
                        <h4>MicroSoft</h4>
                        <p>MicroSoft ....</p>
                        <p>
                            <a class="btn btn-primary">Up</a>
                            <a class="btn btn-default">Down</a>
                        </p>
                    </div>
                </div>
</div>

　　

 

 

警告框

在交互式網頁中，常常要根據用戶操做的上下文爲用戶提供 靈活的提示消息，好比操做成功、警告提示、錯誤信息。

默認的警告框是用帶有alert樣式的div元素容器包含的（p元 素也能夠），內部可選地添加一個關閉按鈕button元素，關閉按鈕要確保設置button元素的屬性值data-dismiss="alert"， 緣由是警告框的關閉功能是經過JavaScript檢測該屬性實現的.

alert-danger（危險紅）、alert-success（成功綠）、alert-info（信息藍）、alert-warning（警告黃）

在警告框中，還對h四、hr、a標籤作了處理。組合起來很是酷。

<div class="alert alert-success">
                <a href="#" class="close" data-dismiss="alert">x</a>
                <h4>Warning</h4>
                <hr />
                <p>Check your write,or look <a href="#">help</a></p>
</div>

 

  

進度條

進度條（Progress bar）是一個比較常見的網頁效果，通常用於表示加載、跳轉或動做正在執行中的狀態

progress用於設置進度條的容器樣式，而 progress-bar用於限制進度條的進度（顏色進度）。

progress樣式主要是設置進度條容器的背景色、容器高度、 間距等，progress-bar樣式在設置進度方面，重要的是設置了進度條的 顏色（即樣式的背景色）和過渡效果

除了progress-primary（重點藍）外，其餘4種基本顏色。

bs還爲進度條提供 了一種條紋樣式，而且不一樣的顏色能夠顯示不一樣的條紋。只是在容器元素上附加 了一個新的progress-striped樣式，該樣式的實現是利用CSS3的線 性漸變特性linear-gradient來實現的。

bs還提供了一個更炫的動畫 樣式，即：讓條紋動起來。active

堆疊，只要在progress容器內放置多個progress-bar便可實現。

<div class="progress progress-striped">
                <div class="progress-bar active" style="width: 35%">35</div>
                <div class="progress-bar progress-bar-success" style="width: 15%"></div>
</div>

 

媒體對象

媒體對象（Media object）這是一個抽象的樣式，用以構建不一樣類型的組件。

一組媒體的默認使用方式一般包括以下幾個樣式：media、 media-object、media-body、media-heading 4個樣式，和一個用於控制左右浮動的pull-left（或pull-right）樣式。

若是須要將多個媒體進行列表展現的話，則能夠利用在ul上應用media-list樣式、li上應用media樣式來實現。

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

 

 

列表

大部分的列表組都是由無標記的列表（ul/li）來實現

列表組有2個基本的樣式：listgroup和list-group-item。

導航箭頭

.list-group-item > .glyphicon-chevron-right {
    float: right; /* 設置小圖標 右浮動 */
    margin-right: 5px; /* 小圖標在span、label、i元素上設置-15像素的右間距 */
}

.list-group-item > .glyphicon + .badge {
    margin-right: 5px; /* 若是兩個圖標放在一塊兒顯示，則保留5像素的右間距 */
}

 

bs又提供了list-groupitem-heading和list-group-item-text這兩個樣式，用於開發人員自 定義列表項裏的具體內容，其表示的意思分別是：列表項條目的 頭部（heading）和主要內容（text）。　　

 

<div class="list-group">
                <a href="#" class="list-group-item active">
                    <span class="badge">11</span>
                    Cras justo odio
                </a>
                <a href="#" class="list-group-item list-group-item-danger">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">List group item heading</h4>
                    <p class="list-group-item-text">...</p>
                </a>
</div>

 

 

面板

基礎的面板很簡單，就是簡單在div上應用panel，產生一個具 有邊框的文本顯示框

又爲其定義 了面板頭（panel-heading）和麪板尾（panel-footer）樣式，

除了progress-primary（重點藍）外，其餘4種基本顏色。

通常在使用面板的時候，每每可能會在主區域（panel-body）內放不少內容，好比圖片、表格等

帶表格的面板

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

 

窪地

窪地（Well）樣式的效果和大屏幕展播Jumbotron樣式相似， 不一樣點是well樣式有了邊框設置，而且默認高度是自適應文本的高度。主要用來實現嵌入在網頁中。

well樣式也提供了不一樣大小的樣式（主要是panding和圓角大小），分別是：well-lg和well-sm

內容太長會超出邊界！

 

主題

 3.x版本中還新增了一個bootstraptheme.css文件，該文件並無提供什麼新的功能，僅是針對一些經常使用的CSS組件進行了加強。

可是theme默認並無對全部的CSS組件都進行加強，而是針對9個方面的組件進行了加強：btn按鈕、縮略圖、 下拉菜單、導航條、警告框、進度條、列表組、面板和well

theme文件不是必需要引用的，若是喜歡這種風格才引用它；

若是要定製本身的風格，則能夠引用本身的theme名 稱，好比bootstrao-theme-flatui.css。

可是必定要注意，該文件必定要在bootstarp.min.css文件以後才能引用，不然會覆蓋默認的效果。

 

本節地址：http://neverc.cnblogs.com/p/4782635.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程