2. 程式人生 > >BootStrap常用CSS樣式的程式碼示例

BootStrap常用CSS樣式的程式碼示例

阿新 • • 發佈：2019-02-01

Bootstrap常用的樣式的程式碼示例


  1. 樣式表引入的注意事項

jquery.js是bootstrap.js的基礎，引入js檔案時必須先引入jquery.js.
後引入jquery.js錯誤程式碼:Uncaught Error: Bootstrap's JavaScript requires jQuery 

<head>
    <script src="jquery.js"></script>
    <script src="bootstrap.js"></script>
    <link
 
 rel="stylesheet" href="bootstrap.css">
</head>

2.柵格系統

因為各種螢幕的尺寸不一樣，為了實現自適應，將螢幕分成12等分，規定每個元素所佔的等分個數來實現在自適應。 

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1>1</div>
            <div class="col-md-2>2</div
 
>
            <div class="col-md-3>3</div>
            <div class="col-md-4>4</div>
            <div class="col-md-2>2</div>
        </div>
    </div>
</body>

柵格系統樣式

3.Bootstrap表格樣式

  • 最基礎的樣式
<table class="table">
    <tr>
        <th
 
>h1</th>
        <th>h2</th>
        <th>h3</th>
    </tr>
    <tr>
        <td>d1</td>
        <td>d2</td>
        <td>d3</td>
    </tr>
</table>

這裡寫圖片描述

  • 帶邊框的表格 
<table class="table table-bordered">
    <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
    </tr>
    <tr>
        <td>d1</td>
        <td>d2</td>
        <td>d3</td>
    </tr>
</table>

帶邊框表格樣式

  • 帶條紋的表格 
<table class="table table-bordered table-striped">
    <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
    </tr>
    <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
    </tr>
    <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
    </tr>       
    <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
    </tr>               
</table>

帶條紋的表格

  • 滑鼠懸停表格 
<table class ="table table-bordered table-hover">
    <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
    </tr>
    <tr>
        <td>d1</td>
        <td>d2</td>
        <td>d3</td>
    </tr>
</table>

滑鼠懸停表格

  • 狀態類表格（帶背景色的表格） 
<table class ="table table-bordered table-hover">
    <tr class="active">
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
    </tr>
    <tr class="danger">
        <td>d1</td>
        <td>d2</td>
        <td>d3</td>
    </tr>
    <tr class="info">
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
    </tr>
    <tr>
        <td class="success">d1</td>
        <td class="warning">d2</td>
        <td class="success">d3</td>
    </tr>
</table>

這裡寫圖片描述

4.表單樣式

表單元素一般使用.form-control來修飾，一組控制元件最好放在一個div.form-group中顯得更緊湊。

  • 基本的表單 
<form action="">
   <div class="form-group">
      <label for="name">name</label>
      <input type="text" name="" id="name" class="form-control">
   </div>
   <div class="form-group">
      <label for="password">password</label>
      <input type="password" name="password" id="" class="form-control">
   </div>
   <div class=" col-md-6 col-md-offset-3 form-group">
      <button class="btn btn-success">LOg in</button>
      <button class="btn btn-warning">LogOUt</button>
   </div>
</form>

bootstrap表單基本樣式

  • 內聯表單
    內聯表單：在同一行的表單 
<form action="" class="form-inline">
    <div class="form-group">
       <label for="name">使用者名稱:</label>
       <input type="text" name="" id="" class="form-control">
    </div>
    <div class="form-group">
       <label for="password">密碼:</label>
       <input type="password" name="" id="" class="form-control">
    </div>
    <div class="form-group">
       <button class="btn btn-success">LOG in</button>
       <button class="btn btn-info">LOg out</button>
    </div>
</form>

bootstrap內聯表單

  • 水平排列的表單 
<form action="" class="form-horizontal">
    <div class="form-group">
       <label for="name" class="col-md-2 control-label">Name:</label>
    <div class="col-md-10">
        <input type="text" name="name" id="name" class="form-control">
    </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-md-2 control-label">Password:</label>
    <div class="col-md-10">
        <input type="password" name="password" id="password" class="form-control">
    </div>
    </div>
    <div class="form-group">
    <div class="col-md-6 col-md-offset-3">
        <button class="btn btn-success">登陸</button>
        <button class="btn btn-warning">登出</button>
    </div>
    </div>
</form>

水平排列的表單

  • 支援多行文字的文字域 
<textarea class="form-control" rows="3"></textarea>

  • 單選框和多選框

    1.預設樣式（獨佔一行） 

<div class="checkbox">
    <label>
       <input type="checkbox" name="" id="">
       預設的多選框樣式
    </label>
</div>
<div class="checkbox">
    <label>
       <input type="checkbox" name="" id="">
       預設的多選框樣式
    </label>
</div>

<div class="radio">
   <label>
       <input type="radio" name="name" id="">
      預設的單選框樣式
   </label>
</div>
<div class="radio">
   <label>
      <input type="radio" name="name" id="">
      預設的單選框樣式
    </label>
</div>

這裡寫圖片描述


2.內聯多選框和單選框 

<label class="checkbox-inline">
    <input type="checkbox" name="name" id="" class="form-control">1
</label>
<label class="checkbox-inline">
    <input type="checkbox" name="name" id="" class="form-control">2
</label>

<div></div>
<label class="radio-inline">
    <input type="radio" name="name2" id="" class="form-control">1
</label>
<label class="radio-inline">
    <input type="radio" name="name2" id="" class="form-control">2
</label>

這裡寫圖片描述

  • 下拉列表 
<select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

這裡寫圖片描述

  • 靜態控制元件？
    沒搞懂這個東西是幹啥用的，也不知道label.sr-only 是幹嘛用的。 
<div class="form-group">
    <label class="control-label col-md-2">Email</label>
    <div class="col-md-10">
        <p class="form-control-static">[email protected]</p>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-2 sr-only">Email</label>
    <div class="col-md-10">
        <p class="form-control-static">[email protected]</p>
    </div>
</div>
![這裡寫圖片描述](https://img-blog.csdn.net/20171018112947202?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzEzMzkzNjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

  • 輸入框幾種狀態

    @1.自動獲得焦點狀態

    看了半天文件沒看懂，按照文件寫了兩遍，都不生效。Html5新增 autofocus 屬性，剛好解決bootstrap自動獲得焦點的問題。 

<input type="text" class="form-control" autofocus>

這裡寫圖片描述

@2.禁用狀態和只讀狀態 

<input type="text" disabled class="form-control" value="Hello">
<input type="text" readonly class="form-control" value="hello">

這裡寫圖片描述
@3.批量禁用

Talk is cheap,show U code. 

<form>
  <fieldset disabled>
      <input type="text" class="form-control">
      <input type="radio" class="form-control">
  </fieldset>
</form>

這裡寫圖片描述

  • 一些樣式組合

@1.帶提示文件的輸入框 

<div class="form-group">
   <label for="input1" class="control-label ">Email</label>
   <input type="text" name="" id="input1" class="form-control">
   <span class="help-block">請輸入電子郵件。</span>
</div>
<div class="form-group">
   <label for="input2" class="control-label">Name</label>
   <input type="text" name="name" id="input2" class="form-control">
   <span class="help-block">請輸入姓名。</span>
</div>

這裡寫圖片描述

@2.校驗狀態

將整個.form-group加上色彩。 

<div class="form-group has-error">
    <label for="input1" class="control-label">name</label>
    <input type="text" name="name" id="input1" class="form-control">
</div>

這裡寫圖片描述

@ 3.帶有額外的圖示 

<div class="form-group has-feedback">
   <label for="input1" class="control-label">Name</label>
   <input type="text" name="name" id="input1" class="form-control">
   <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

這裡寫圖片描述

<div class="form-group has-success has-feedback">
    <label for="input2" class="control-label">Name</label>
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" name="name" id="input2" class="form-control">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
</div>

這裡寫圖片描述

  • 控制元件尺寸


    @1.控制元件高度 
<input class="form-control input-lg" type="text">
<input class="form-control" type="text">
<input class="form-control input-sm" type="text" >

這裡寫圖片描述

@2.控制元件寬度 

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label">Large label</label>
    <div class="col-sm-10">
    <input class="form-control" type="text">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label">Small label</label>
    <div class="col-sm-10">
    <input class="form-control" type="text">
    </div>
  </div>
</form>

這裡寫圖片描述

  • 按鈕

樣式型別 內容 示例
背景色 btn-default,btn-success,btn-info,btn-danger,btn-primary,btn-warning，btn-link <button class="btn btn-success></span>
尺寸 btn-lg,btn-default,btn-sm,btn-xs <button class="btn btn-lg"></span>
啟用狀態 active <button class="btn btn-active"></button>
連結 <a href="#" class="btn btn-default"></a>
禁用狀態 disabled <button class="btn btn-default" disabled="disabled"></button>

-

圖片

@ 1.響應式圖片 

<img src="#" class="img-responsive">

@ 2.圖片形狀 

<img src="#" class="img-rounded">
<img src="#" class="img-circle">
<img src="#" class="img-thumbnail">

這裡寫圖片描述

  • 輔助類

@1. 文字顏色 

<p class="text-muted">text-muted</p>
<p class="text-primary">text-primary</p>
<p class="text-success">text-success</p>
<p class="text-info">text-info</p>
<p class="text-warning">text-warning</p>
<p class="text-danger">text-danger</p>

這裡寫圖片描述

@2.文字背景顏色 

<p class="bg-primary">bg-primary</p>
<p class="bg-success">bg-success</p>
<p class="bg-info">bg-info</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-danger">bg-danger</p>

這裡寫圖片描述

  • 其他一些css樣式

樣式名稱 樣式類 樣式程式碼 樣式示例
關閉按鈕 button.close>span>& times;
三角按鈕 span.caret
快速浮動 div.pull-left/div.pull-right
內容塊居中 div.center-block
清除浮動 div.clearfix
顯示或者隱藏內容 .show/.hidden
*螢幕和鍵盤導航 .sr-only/.sr-only和.sr-only-foucusable配合使用
圖片替換 .text-hide

Bootstrap CSS樣式部分學習筆記到此結束

相關推薦

BootStrap常用CSS樣式的程式碼示例

Bootstrap常用的樣式的程式碼示例 樣式表引入的注意事項 jquery.js是bootstrap.js的基礎，引入js檔案時必須先引入jquery.js. 後引入jquery.js錯誤程式碼:Uncaught Error

重修課程day54（bootstrap之css樣式）

mit tip erro context ups highlight tac esc boot 一 bootstrap的介紹 　Bootstrap是將html，css和js的代碼打包好了，只管我們拿來調用。是基於jquery開發的。 　使用BootCDN提供的免費CDN加速

關於bootstrap中css樣式與自己設置的css樣式相撞問題

找到 審查 頁面 可能 網頁 設置 顯示效果 顯示 元素 1.在對網頁進行布局前就先將bootstrap包中的東西導入到自己的頁面中去。自己定義的css樣式導入在bootstrap之後，可以起到當類名與bootstrap重復時對bootstrap樣式踐行覆蓋的作用。 2.盡

常用css樣式（文字超出部分用省略號顯示、滑鼠經過圖片放大、出現陰影）

文字超出部分用省略號顯示： white-space: nowrap; /* 不換行 */ overflow: hidden; /* 超出部分不顯示 */ text-overflow: ellipsis; /* 超出部分顯示為... */ 滑鼠經過圖片放大 .team-img img{ width:188

常用css樣式（文字超出部分用省略號顯示、鼠標經過圖片放大、出現陰影）

eight code ado 部分 -m ans nsf 超出 nowrap 文字超出部分用省略號顯示： white-space: nowrap; /* 不換行 */ overflow: hidden; /* 超出部分不顯示 */ text-overflow: ellips

Bootstrap——全域性CSS樣式

1、.container 為頁面內容和柵格系統包裹.container容器，響應式，大屏固定寬度且居中，小屏百分百自適應。 2、.row . col-*-* Bootstrap中定義了一套響應式的網格系統，將一個容器劃分成12列，然後通過col-*-*的類名控制每一列的佔比（每列寬度

CSS樣式 程式碼、語法基礎（下）

· 在講解CSS佈局之前，我們需要提前知道一些知識，在CSS中，html中的標籤元素大體被分為三種不同的型別：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。   常用的塊狀元素有：   <div>、<p>、<h1>

常用CSS樣式2：其它樣式

#css顏色表示法 css顏色值主要有三種表示方法： 1、顏色名錶示，比如：red 紅色，gold 金色 2、rgb表示，比如：rgb(255,0,0)表示紅色 3、16進位制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00 #css選擇器 常

常用CSS樣式1：文字樣式

#css基本語法及頁面引用 ##css基本語法 css的定義方法是： 選擇器 { 屬性:值; 屬性:值; 屬性:值;} 選擇器是將樣式和頁面元素關聯起來的名稱，屬性是希望設定的樣式屬性每個屬性有一個或多

前端頁面檔案拖拽上傳模組html/css/js程式碼示例

最近給衛生局做一個表格上傳/視覺化系統，算是小有成果。今天把專案中的檔案拖拽上傳模組分離出來，做了一個獨立的小demo,並把相關程式碼打包上傳到了我的github中，為了其他學習者和開發者提供拙見。 由於程式碼中我的註釋很詳盡，所以具體邏輯實現及不介紹

react native 日常-RN所支援的常用css樣式

react-native支援的css樣式 ReactNative中能使用的css樣式 “alignItems”,居中對齊彈性盒的各項 元素 例：alignItems:‘center’, stretch(專案被拉伸以適應容器) center(專案位於容器的

Bootstrap全域性CSS樣式之表單

.form-control——將單獨的表單控制元件賦予一些全域性樣式，如預設寬度width:100%； .form-group——包裹表單控制元件，獲得最好的排列； .form-inline——將表單設定為內聯表單，只適用於視口（viewport）至少在 768px 寬度時

bootstarp分頁外掛 bootstrapv3.css 與 bootstrap.min.css 樣式衝突

  今天在優化自己的部落格專案時，發現啦一個頁面中的bug，就花了點時間解決。主要是bootstrap 響應式佈局的問題，在拖拽頁面大小的時候，發現選單欄的展示在一定的寬度時，會出現如下圖的情況

常用css 樣式整理

1. 強制文字單行顯示並將溢位文字以省略號顯示 white-space:nowrap;//強制文字不換行 text-overflow:ellipsis;//溢位文字以省略號顯示 overflow:hidden; /* text-overflow: clip |

使用css前處理器sass輕鬆生成margin、padding四個方向多個值的css樣式程式碼

開發十年，就只剩下這套架構體系了！ >>>   

Bootstrap常用樣式的代碼

bootstrapBootStrap常見的樣式的示例代碼bootstrap的引入<script src="jquery.js"></script> //jquery.js must loaded before boostrap.js <script src="bootstr

2.Bootstrap 全局CSS樣式和字體圖標

-h 支持 變量 link itl 寬度 support 優先 全局 一.全局CSS樣式 1.html5文檔類型,標準,參照下面的進行設置 <!DOCTYPE html> <html lang="zh-CN"> ... </html>

bootstrap之CSS全局樣式

ins 定義 添加 文本 必須 pad 多個 子類 內容 一、排版樣式(paiban) 　　1、標題標簽 　　<body style="padding:20px"> 　　<h1>h1.bootstrap</h1><br/>

css清除常用預設樣式表

/*公共樣式*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin: 0; padding: 0; }div

網頁css樣式初始化快捷程式碼

淘寶的樣式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend,button, input, textarea, th, td { m