BootStrap之基礎-2 CSS樣式(全局CSS樣式)

時間 2020-07-24

標籤 bootstrap 基礎 css 樣式全局欄目 Bootstarp 简体版

原文原文鏈接

1、全局CSS樣式web

概述api

- HTML5文件類型ide

- BootStrap使用到的某些HTML元素和CSS屬性須要將頁面設置爲HTML5佈局

- 移動設備優先ui

- 爲了確保適當的繪製和觸屏縮放，須要在<head>之中添加viewport元數據元素spa

CSS全局樣式
設計

- 爲body元素設置 background-color: #fff;3d

- 使用 @font-family-base、@font-size-base 和 @line-height-base a變量做爲排版的基本參數orm

- 爲全部連接設置了基本顏色@link-color,而且當連接處於:hover狀態時才添加下劃線blog

佈局容器

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

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

按鈕

圖片

- 響應式圖片

- 圖片形狀

表格

- 基本表格

- .table

- 條紋狀表格

- .table-striped

- 帶邊框表格

- .table-bordered

- 緊縮表格

- .table-condensed

- 鼠標懸停

- .table-hover

- 響應式表格(表格父級元素)

- .table-responsive

排版

- 標題

- 元素

<small>

- 樣式

.h1 - .h6

.small

- 頁面主題

- 全局

font-size: 14px (@font-size-base)

line-height: 1.428 (@line-height-base)

- 中心內容

.lead

- 內聯文本

- <mark>

- <del>

- <s>

- <ins>

- <u>

- <small>

- <strong>

- <em>

- 對齊

- text-left

- text-center

- text-right

- text-justify

- text-nowrap

- 大小寫

- text-lowercase

- text-uppercase

- text-capitalize

- 縮略語

- <abbr>

title

.initialism

- 地址

- <address>

- 引用

- <blockquote>

.backquote-reverse

- 列表

- 無序列表

<ul>

- 有序列表

<ol>

- 無樣式列表

.list-unstyled

- 內聯列表

.list-inline

- 描述

<dl>

- 水平描述

dl.horizontal

使用排版樣式設計佈局頁

柵格

- 每行(row)12列(col)

- 基本流佈局

- 響應式佈局

- 偏移

- 嵌套

- 排序

表單

- 基本表單

- 水平表單

- 內聯表單

- 輸入框

- form-control

- 文本域

- form-control

rows

- 多選和單選框

- 內聯多選和單選框

.checkbox-inline

.reaio-inline

- 下拉列表

- form-control

- 靜態控件

- form-control-static

- 狀態

- 焦點狀態

- 禁用狀態

.disabled

- 只讀狀態

.readonly

- 校驗

- <div class="form-group has-sucess|warning|error">

- 反饋圖標: has-feedback

glypicon-ok form-control-feedback

glypicon-warning-sign form-control-feedback

glypicon-remove form-control-feedback

總結：本章內容主要介紹了 BootStrap CSS樣式(全局CSS樣式)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。