使用BootStrap框架設置全局CSS樣式

来源:http://www.cnblogs.com/wuhao752718372/archive/2017/09/17/7535556.html
-Advertisement-
Play Games

一、排版 標題 HTML 中的所有標題標簽,<h1> 到 <h6> 均可使用。另外,還提供了 .h1 到 .h6 類,為的是給內聯(inline)屬性的文本賦予標題的樣式。 在標題內還可以包含 <small> 標簽或賦予 .small 類的元素,可以用來標記副標題。 內聯文本元素 被刪除的文本和無用 ...


一、排版

標題

HTML 中的所有標題標簽,<h1> 到 <h6> 均可使用。另外,還提供了 .h1 到 .h6 類,為的是給內聯(inline)屬性的文本賦予標題的樣式。

    <h1>這是一個h1標簽</h1>
    <h2>這是一個h2標簽</h2>
    <h3>這是一個h3標簽</h3>
    <h4>這是一個h4標簽</h4>
    <h5>這是一個h5標簽</h5>
    <h6>這是一個h6標簽</h6>

在標題內還可以包含 <small> 標簽或賦予 .small 類的元素,可以用來標記副標題。

 

內聯文本元素

You can use the mark tag to <mark>highlight</mark> text.

 

被刪除的文本和無用文本

對於被刪除的文本使用 <del> 標簽。而對於沒用的文本使用 <s> 標簽。

<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>

 

插入文本和帶下劃線的文本

額外插入的文本使用 <ins> 標簽。而為文本添加下劃線,使用 <u> 標簽。

<ins>This line of text is meant to be treated as an addition to the document.</ins>
<u>This line of text will render as underlined</u>

 

文本的對齊方式

通過文本對齊類,可以簡單方便的將文字重新對齊。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

 

改變文本的大小寫

<p class="text-lowercase">hello world!!</p>
<p class="text-uppercase">hello world!!</p>
<p class="text-capitalize">hello world!!</p>

 

列表

分為無序列表、有序列表、無樣式列表和內聯列表

①無序列表

<ul><!--無序列表-->
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
    </ul>
  </li>
  <li>Lorem ipsum dolor sit amet</li>
</ul>

②有序列表

<ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Nulla volutpat aliquam velit</li>
    <li>Lorem ipsum dolor sit amet</li>
</ol>

③無樣式列表

移除了預設的 list-style 樣式和左側外邊距的一組元素(只針對直接子元素)。這是針對直接子元素的,也就是說,你需要對所有嵌套的列表都添加這個類才能具有同樣的樣式。

<ul class="list-unstyled">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Nulla volutpat aliquam velit
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
        </ul>
    </li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

④內聯列表

通過設置 display: inline-block; 並添加少量的內補(padding),將所有元素放置於同一行。

<ul class="list-inline">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Nulla volutpat aliquam velit</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

 

二、代碼

內聯代碼

通過 <code> 標簽包裹內聯樣式的代碼片段。

<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>

用戶輸入

通過 <kbd> 標簽標記用戶通過鍵盤輸入的內容。

<p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.</p>

代碼塊

多行代碼可以使用 <pre> 標簽。為了正確的展示代碼,註意將尖括弧做轉義處理。

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

 

三、表格

標準表格樣式

為任意 <table> 標簽添加 .table 類可以為其賦予基本的樣式 — 少量的內補(padding)和水平方向的分隔線。這種方式看起來很多餘!?但是我們覺得,表格元素使用的很廣泛,如果我們為其賦予預設樣式可能會影響例如日曆和日期選擇之類的插件,所以我們選擇將此樣式獨立出來。

<table class="table table-bordered">
      <thead>
           <tr>
               <th>whgogogdaw</th>
               <th>dawgdawdg</th>
           </tr>
      </thead>
      <tbody>
           <tr class="danger">
               <td>111111</td>
               <td>111111</td>
           </tr>
           <tr>
               <td>111111</td>
               <td>111111</td>
           </tr>
           <tr>
               <td>111111</td>
               <td>111111</td>
           </tr>
     </tbody>
 </table>

 

條紋狀表格

 通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。

<table class="table table-bordered table-striped">
     <thead>
         <tr>
            <th>whgogogdaw</th>
            <th>dawgdawdg</th>
         </tr>
     </thead>
     <tbody>
         <tr>
            <td>111111</td>
            <td>111111</td>
         </tr>
         <tr>
            <td>111111</td>
            <td>111111</td>
         </tr>
     </tbody>
 </table>

 

滑鼠懸停

通過添加 .table-hover 類可以讓 <tbody> 中的每一行對滑鼠懸停狀態作出響應。相當於CSS中的點擊事件

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

緊縮表格

通過添加 .table-condensed 類可以讓表格更加緊湊,單元格中的內補(padding)均會減半。

狀態類

<table class="table table-bordered table-striped table-hover">
    <thead>
        <tr>
            <th>whgogogdaw</th>
            <th>dawgdawdg</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>111111</td>
            <td>111111</td>
        </tr>
        <tr class="success">
            <td>111111</td>
            <td>111111</td>
        </tr>
        <tr class="danger">
            <td>111111</td>
            <td>111111</td>
        </tr>
    </tbody>
</table>

 

BootStrap框架的內容今天就先寫到這裡,往後會陸續更新完善,更新,希望能夠幫助到您!!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 首先分析第一個比較重要的方法 put 方法,源碼如下 分析上面的源碼,我們可以得到下麵的結論: 當我們試圖將一個key-value 調用put方法放入HashMap的時候,首先會調用key的hashCode方法算出該Entry存放的位置,若兩個key的hashCode相同則在table中的存儲位置相 ...
  • 本文通過開發一個應用來學習Android基本概念及構成應用的UI組件。 開發的應用名叫GeoQuiz,它能給出一道道地理知識問題。用戶點擊true或false按鈕回答問題,應用即時做出反饋 第一步請先自行創建一個新項目,目錄如下 1. 用戶界面設計 在XML文件(activity_quiz.xml) ...
  • 基於http://www.cnblogs.com/HAOZHE/p/5276763.html改編寫的關於隨機生成四則運算的小程式 github源碼和工程文件地址:https://github.com/HuChengLing/- 基本要求: 除了整數以外,還能支持真分數的四則運算。 對實現的功能進行描 ...
  • 最近樓主加班 嘍, 好久沒有更新我的博客了,哎,一言難盡,廢話我就不說了,來開始上精華。 背景:目前市面上有很多bug管理工具,但是各有各的特點,最著名,最流行的就是禪道,一個偶然的機會接觸到了python ,學到tornado後,就想著去怎麼去用到實處,後來發現自己公司的除了禪道就記錄bug沒有什 ...
  • dotnet的鏡像:https://hub.docker.com/r/microsoft/dotnet/,如下圖: 下麵就演示一下怎麼跑一下示常式序,用意是拋磚引玉。 1.首先拉一下鏡像:docker pull microsoft/dotnet;命令在倉庫首頁的右上角。下載慢的同學可以使用阿裡的加速 ...
  • A代碼編輯器,線上模版編輯,仿開發工具編輯器,pdf線上預覽,文件轉換編碼B 集成代碼生成器 [正反雙向](單表、主表、明細表、樹形表,快速開發利器)+快速表單構建器 freemaker模版技術 ,0個代碼不用寫,生成完整的一個模塊,帶頁面、建表sql腳本,處理類,service等完整模塊C 集成阿 ...
  • 系統介紹: 1.系統採用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC瀏覽器使用) 2.springmvc +spring4.3.7+ mybaits3.3 SSM 普通java web(非maven, 附贈pom.xml文件) 資料庫:mysql 3.開發工具:my ...
  • 轉載請註明原創出處,謝謝! 今天看群聊jvm,通常會問ygc合適嗎? 阿飛總結,可能需要2個維度,1.單位時間執行次數,2.執行時間 ps p pid o etime 查看下進程的運行時間, 17天才這麼點ygc,(這裡算出頻率),正常, 然後再算出ygc每次的時間,即142/7618=18ms,正 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...