08-bootcss

時間  2019-11-10
標籤 bootcss 简体版
原文   原文鏈接

官網：https://v3.bootcss.com/javascript

CDN庫：http://www.bootcdn.cn/bootstrap/css

 

媒體查詢

 @media screen and (min-width: 500px) {
            div{
                width: 100px;
                height: 100px;
                background: yellow;
            }
        }
        @media screen and (min-width: 800px) {
            div{
                width: 200px;
                height: 200px;
                background: blue;
            }
        }

 

佈局容器

.container 類用於固定寬度並支持響應式佈局的容器java

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

.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器python

<div class="container-fluid">
  ...
</div>

 

柵格系統(系統會自動分爲最多12列)

	                  超小屏幕        小屏幕          中等屏幕 桌面顯示器    大屏幕 大桌面顯示器 
	                手機 (<768px)   平板 (≥768px)	    (≥992px)	           (≥1200px)
柵格系統行爲	       老是水平排列	  開始是堆疊在一塊兒的，當大於這些閾值時將變爲水平排列C		
.container 最大寬度	 None （自動）	   750px	            970px	              1170px
類前綴	               .col-xs-	          .col-sm-	       .col-md-	             .col-lg-
列（column）數	          12			  12                 12                     12
最大列（column）寬	   自動	          ~62px	             ~81px	               ~97px
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

 

排版

HTML 中的全部標題標籤，<h1> 到 <h6> 都可使用。另外，還提供了 .h1 到 .h6 類，爲的是給內聯（inline）屬性的文本賦予標題的樣式c++

<h1>我是h1標籤</h1>
<h2>我是h2標籤</h2>
<h3>我是h3標籤</h3>
<h4>我是h4標籤</h4>
<h5>我是h5標籤</h5>
<h6>我是h6標籤</h6>
<span class="h1">我是p標籤的h1標籤</span><br/><br/>
<span class="h2">我是p標籤的h2標籤</span><br/><br/>
<span class="h3">我是p標籤的h3標籤</span><br/><br/>
<span class="h4">我是p標籤的h4標籤</span><br/><br/>
<span class="h5">我是p標籤的h5標籤</span><br/><br/>
<span class="h6">我是p標籤的h6標籤</span><br/><br/>

 

表格

爲任意 <table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線bootstrap

條紋狀表格

經過 .table-striped 類能夠給 <tbody> 以內的每一行增長斑馬條紋樣式佈局

<table class="table table-striped">
  ...
</table>

帶邊框的表格

添加 .table-bordered 類爲表格和其中的每一個單元格增長邊框字體

<table class="table table-bordered">
  ...
</table>

鼠標懸停

經過添加 .table-hover 類可讓 <tbody> 中的每一行對鼠標懸停狀態做出響應ui

<table class="table table-hover">
  ...
</table>

緊縮表格

經過添加 .table-condensed 類可讓表格更加緊湊，單元格中的內補（padding）均會減半spa

<table class="table table-condensed">
  ...
</table>

狀態類

經過這些狀態類能夠爲行或單元格設置顏色

Class 描述
.active 鼠標懸停在行或單元格上時所設置的顏色
.success 標識成功或積極的動做
.info 標識普通的提示信息或動做
.warning 標識警告或須要用戶注意
.danger 標識危險或潛在的帶來負面影響的動做

表單

內聯表單

爲 <form> 元素添加 .form-inline 類可以使其內容左對齊而且表現爲 inline-block 級別的控件。只適用於視口（viewport）至少在 768px寬度時（視口寬度再小的話就會使表單摺疊）。

水平排列的表單

經過爲表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，能夠將 label 標籤和控件組水平並排佈局

 

單獨的表單控件會被自動賦予一些全局樣式。全部設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性爲 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中能夠得到最好的排列

<form action="#" class="form-horizontal">
	<div class="form-group">
		<input type="text" placeholder="請輸入你的賬號" class="form-control">
	</div>
	<div class="form-group">
		<input type="password" placeholder="請輸入你的密碼" class="form-control">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox">記住我
		</label>
		</div>
	<div class="radio">
		<label for="man">
			<input type="radio" id="man" name="sex">man
		</label>
		<label for="woman">
			<input type="radio" id="woman" name="sex">woman
		</label>
		<label for="secret">
			<input type="radio" id="secret" name="sex" disabled>secret
		</label>
    </div>
	<div class="form-group">
		<select name="select" class="form-control">
			<option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
		</select>
	</div>
</form>

 

按鈕

爲 <a>、<button> 或 <input> 元素添加按鈕類（button class）便可使用 Bootstrap 提供的樣式

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<button type="button" class="btn btn-default">（默認樣式）Default</button>
<button type="button" class="btn btn-primary">（首選項）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（通常信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危險）Danger</button>
<button type="button" class="btn btn-link">（連接）Link</button>

尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 就能夠得到不一樣尺寸的按鈕

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默認尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默認尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

經過給按鈕添加 .btn-block 類能夠將其拉伸至父元素100%的寬度，並且按鈕也變爲了塊級（block）元素

<button type="button" class="btn btn-primary btn-lg btn-block">（塊級元素）Block level button</button>

 

圖片

經過爲 <img> 元素添加如下相應的類，可讓圖片呈現不一樣的形狀

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

 

輔助類

情境文本顏色

<p class="text-muted">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-primary">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-success">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-warning">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

情境背景色

<p class="bg-primary">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-success">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-info">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-warning">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

關閉按鈕

經過使用一個象徵關閉的圖標，可讓模態框和警告框消失

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

三角符號

經過使用三角符號能夠指示某個元素具備下拉菜單的功能。注意，向上彈出式菜單中的三角符號是反方向的

<span class="caret"></span>

快速浮動

<div class="pull-left">...</div>
<div class="pull-right">...</div>

清除浮動

經過爲父元素添加 .clearfix 類能夠很容易地清除浮動

<div class="clearfix">...</div>

顯示或隱藏內容

<div class="show">...</div>
<div class="hidden">...</div>

 

Glyphicons字體圖標

圖標類不能和其它組件直接聯合使用。它們不能在同一個元素上與其餘類共同存在。應該建立一個嵌套的 <span> 標籤，並將圖標類應用到這個 <span> 標籤上.圖標類只能應用在不包含任何文本內容或子元素的元素上。

<span class="glyphicon glyphicon-align-left"></span>
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span>
</button>

 

下拉菜單

用於顯示連接列表的可切換、有上下文的菜單。下拉菜單的 JavaScript 插件讓它具備了交互性

將下拉菜單觸發器和下拉菜單都包裹在 .dropdown 裏，或者另外一個聲明瞭 position: relative; 的元素。而後加入組成菜單的 HTML 代碼

<div class="dropdown">
	<button class="btn btn-primary" data-toggle="dropdown">我是一個下拉框 
	<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>
<br/><br/><br/><br/><br/><br/>
<div class="dropup">
	<button class="btn btn-primary" data-toggle="dropdown">我是一個上拉框 
		<span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="http://www.baidu.com">python</a></li>
      <li><a href="#">c++</a></li>
      <li><a href="#">java</a></li>
    </ul>
</div>

 

按鈕組

經過按鈕組容器把一組按鈕放在同一行裏。經過與按鈕插件聯合使用，能夠設置爲單選框或多選框的樣式和行爲

<div class="btn-group">
  	<button type="button" class="btn btn-default">Left</button>
  	<button type="button" class="btn btn-success">Middle</button>
  	<button type="button" class="btn btn-warning">Right</button>
</div>

按鈕組嵌套下拉框

<div class="btn-group">
	<button class="btn btn-danger">按鈕1</button>
	<button class="btn btn-success">按鈕2</button>
	<button class="btn btn-warning">按鈕3</button>
	<div class="btn-group">
    	<button class="btn btn-primary" data-toggle="dropdown">我是一個下拉框 
    		<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">python</a></li>
            <li><a href="#">c++</a></li>
            <li><a href="#">java</a></li>
        </ul>
    </div>
</div>

分裂式下拉菜單

<div class="btn-group">
	<button class="btn btn-success">成功</button>
	<button class="btn btn-info" data-toggle="dropdown">
		<span class="caret"></span></button>
	<ul class="dropdown-menu">
        <li><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
	</ul>
</div>

 

輸入框組

經過在文本輸入框 <input> 前面、後面或是兩邊加上文字或按鈕，能夠實現對錶單控件的擴展。爲 .input-group 賦予 .input-group-addon 或 .input-group-btn 類，能夠給 .form-control 的前面或後面添加額外的元素

<div class="input-group">
	<span class="input-group-addon">@</span>
	<input type="text" placeholder="請輸入你的賬號" class="form-control">
</div>

<div class="input-group">
	<input type="text" placeholder="請輸入你的賬號" class="form-control">
	<span class="input-group-addon">@</span>
</div>

<div class="input-group">
	<input type="text" placeholder="請輸入你的賬號" class="form-control">
	<span class="input-group-addon">
		<span class="glyphicon glyphicon-heart"></span>
	</span>
</div>

<div class="input-group">
	<span class="input-group-addon">
		<span class="glyphicon glyphicon-heart"></span>
	</span>
	<input type="text" placeholder="請輸入你的賬號" class="form-control">
</div>

 

導航

Bootstrap 中的導航組件都依賴同一個 .nav 類，狀態類也是共用的。改變修飾類能夠改變樣式

標籤頁

注意 .nav-tabs 類依賴 .nav 基類

<ul class="nav nav-tabs">
    <li class="active"><a href="#">python</a></li>
    <li><a href="#">c++</a></li>
    <li><a href="#">java</a></li>
</ul>

膠囊式標籤頁

<ul class="nav nav-pills">
    <li class="active"><a href="#">python</a></li>
    <li><a href="#">c++</a></li>
    <li><a href="#">java</a></li>
</ul>

兩端對齊的標籤頁

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">python</a></li>
    <li><a href="#">c++</a></li>
    <li><a href="#">java</a></li>
</ul>

路徑導航標籤頁

<ul class="breadcrumb">
    <li class="active"><a href="#">python</a></li>
    <li><a href="#">c++</a></li>
    <li><a href="#">java</a></li>
</ul>

 

導航條

添加 .navbar-fixed-top 類可讓導航條固定在頂部,添加 .navbar-fixed-bottom 類可讓導航條固定在底部

<div class="navbar navbar-default navbar-fixed-top">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>

 

分頁

<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><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="#">»</a></li>
</ul>

 

進度條

<div class="progress">
	<div class="progress-bar progress-bar-success" style="width:50%">50%</div>
</div>

<div class="progress">
	<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:50%">50%			</div>
</div>

<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active" 		 style="width:50%">50%</div>
	</div>
</div>
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程