[Bootstrap]7天深入Bootstrap(3)CSS布局_html/css_WEB-ITnose
Bootstrap三大核心内容的基础，即基础的CSS 布局语法。其包括基础排版（Typography）、代码（Code）、表 格（Tables）、表单（Forms）、按钮（Buttons）、图片 （Images）、辅助类（Helper Classes）和响应式设计 （Responsive utilities）。
本节目录：
概述
HTML5文档类型
由于Bootstrap使用了HTML5特定的HTML元素和CSS属性，所 以使用Bootstrap的时候，所有的HTML文件都需要在其顶部引用 HTML5的DOCTYPE属性
<!DOCTYPE html><html lang="en"> ...</html>
移动先行
在移动设备浏览器上，通过为viewport meta标签添加的userscalable=no可以禁用其缩放（zooming）功能。
响应式图片
为了能对图片的大小进行自适应缩放，Bootstrap在3.x版里添 加了一个.img-responsive样式，本质是为图片设置了maxwidth: 100%；和height: auto；属性
排版与链接
Bootstrap为网页设置了一些基本的全局样式、排版和链接风格
- 在body元素上取消了margin设置，改为默认为0，margin:0。
- 在body元素上设置了背景色为白色，background-color: #ffffff。
- 在布局排版方面，字体、字体大小、行间距使用的标准值
居中容器
一个页面（或元素）要居中显示，可以在外部容器上简单应 用.container样式即可。由于栅格系统依赖于外部容器的大小设 置，所以默认情况下container样式有一个max-width属性用于限 制栅格系统的最大宽度
基础排版
标题
bs为传统的标题元素h1～h6重新定义了标准的样式， 使得在所有浏览器下显示效果都一样。
bs还提供了h类的样式， 如.h1的样式比h1标签的样式,不同的是没有定义 margin-top和margin-bottom。
文本
bs为全局设置的字体大小。
small、strong、em、cite
容器内的文本对齐方式：text-left、text-center、text-right、text-justify
缩略语：abbr(鼠标hover显示title值)
列表
bs提供了6种形式的列表，分别是：普通列表、有序列表、去点列表、内联列表、描述列表和水平描述列表。
普通列表(ul)、有序列表(ol)、去点列表(list-unstyled)、描述列表、水平描述列表，只是优化，效果不明显。
内联列表(list-inline)将列表项水平显示。类似水平菜单效果
代码
代码样式通常在需要引用代码的地方出现
单行的内联代码需要使用code元素包含
元素包含的内容是表示该内容需要用户键盘输入，所 以一般是设置成input的效果，用法和code类似
pre元素一般用于显示大块的代码段，并保证原有格式不变。 另外可以在pre元素上应用.pre-scrollable样式，则可以控制该区域 最大高度为340像素，并可以在y方向滚动
表格
bs提供了1种基础.table样式、4种附加样式（.table-striped、.table-bordered、.table-hover、.table-condensed）以及一个支持响应式布局的.table-responsive容器样式。
.table-striped样式，其添加了隔行加背景色的设置。
.table-bordered为表格所有的单元格提供了1条1像素宽的边框
.table-hover当鼠标移动上去时对应的部分能够换个颜色的话，那就会显得很有动感，并且有高亮显示的功能
.table-condensed紧凑型表格，即表格的显示比普通表格稍微紧凑一些， 实现原理是减少单元格的内边距
.tableresponsive样式包装在.table样式外部即可创建响应式表格，其会 在小屏幕设备上（小于768像素）水平滚动
bs为表格的tr元素提供了5种基本的颜色样式（active success info warning danger），用于控制tr的背景颜色。
表单
bs框架中的核心内容，表单提供了丰富的样式（基础、内联、横向）。
先了解2个基本样式
form-control:设置为100%
form-group:设置下边距，保证每个控件显示。
如果在select、input、textarea元素上应用了.form-control样式，显示的宽度会变成100%，并且placeholder的颜色都设置成了 #999999
内联表单
有的时候，我们可能需要一个所有控件都在一行中的表单，只需要在普通的form元素上应用一个.form-inline样式
横向表单
与内联表单的使用方式不太一样，其不能在form元素上简单应用一个.form-horizontal样式。
由于.form-horizontal样式改变了.form-group的行为，将其表现得像栅格系统中的行（row）一样，因此就无需再使用.row样式了。
表单控件
对现有HTML5语法下的input都进行了支持（如 type为text、password、datetime、datetime-local、date、 month、time、week、number、email、url、search、tel和color 的元素）
input元素，必须声明type类型，否则可能会引 起其他问题
select元素，多行选择设置mulitiple属性为multiple
textarea元素，定义了rows数字即可定义大文本框的高度，定义cols可以定义大文本框的宽度
checkbox和radio元素，是input元素里两个非常特殊的type，由于经常搭配文字显示，bs做了标准显示
<div class="radio"> <label><input name="opt" type="radio" />ON</label> </div> <div class="radio"> <label><input name="opt" type="radio" />OFF</label> </div> <div class="checkbox"> <label><input type="checkbox"/>Swing</label> </div> <div class="checkbox"> <label><input type="checkbox" />Runing</label> </div>
当checkbox和radio内容很少时,需要横向显示的时候，可以用checkbox-inline和radio-inline
控件状态
bs提供了3种状态的样式可供使用，分别是：焦点状态（默认提供）、禁用状态、验证提示状态。
使用方式和普通的disabled一样，只需要在禁用元素上使用 disabled属性即可。
fieldset如果使用了disabled属性时，内部的控件也将会禁用。
在填写表单的时候，经常要提示用户其输入内容是否合法，bs提供了.has-warning、.has-error、.has-success三种样式。
（父容器上的has-feedback样式用于 设置定位方式；小图标元素上的form-control-feedback样式用于 设置图标的显示大小）
<div class="form-group has-success has-feedback"> <label class="control-label" for="name">User Name:</label> <input type="text" class="form-control" id="name" /> <span class="glyphicon glyphicon-ok form-control-feedback"></span></div>
控件大小
bs提供了两个样式用于设置稍大或者稍小的input输入框，分别是：.input-lg和.input-sm
按钮
按钮样式，定义了标准5种颜色、1个默认和一个link按钮。
按钮大小，定义3种.btn-lg、.btn-sm、.btnxs。.btn-block样式可以充满父元素，不随文字符宽度变化。
多标签，支持button a input3个标签。为了兼容性，非常建议使用button。
支持active和disabled状态。
图像
提供了3种风格效果,在img标签上应用.img-rounded、.img-circle、.img-thumbnail样式即可
使用过程中需要注意，上述样式没有控制图片的显示大小，所以需要额外应用样式或者限制父元素大小来控制图片显示大小.
IE8及以下版本不支持.img-rounded和.img-circle样式特效。
辅助样式
文本样式，bs提供了1个灰色，和5个基本标准样式的颜色，分别是：柔和灰（text-muted）、主要蓝（text-primary）、成功绿 （text-success）、信息蓝（text-info）、警告黄（textwarning）、危险红（text-danger）
文本背景样式，bs还提供了上面的5种文本颜色样式对应（muted样式除外），分别是：主要蓝（bg-primary）、成功绿（bg-success）、信息蓝（bg-info）、警告黄 （bg-warning）、危险红（bg-danger）
辅助图标
关闭图标（右浮动）
<button class="close">×</button> <a class="close">×</a>
向下箭头
<span class="caret"></span>
浮动
对于内容浮动，一般会有3种需求 （左浮动、右浮动、居中对齐），分别对应了pull-left、pull-right和center-block样式
响应式样式
利用媒体查询的特性，对特定的情况进行隐藏或显示的设置。
.visible-开头的样式表示仅 在某尺寸时显示，其他都隐藏；而.hidden样式则表示仅在某尺寸 时隐藏，其他都显示。
如：
提供了分别对浏览器和打印机进行隐藏和显示的设置 visible-print和hidden-print
只在大屏幕下显示 visble-lg
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7324
9
1625
14
1350
46
1262
25
1209
29
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?
Mar 04, 2025 pm 12:32 PM
공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.
HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?
Mar 17, 2025 pm 12:27 PM
이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.
HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?
Mar 17, 2025 pm 12:20 PM
기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.
웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?
Mar 04, 2025 pm 02:39 PM
이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.
& lt; datalist & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:33 PM
이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?
Mar 12, 2025 pm 04:05 PM
이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.
& lt; Progress & Gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:34 PM
이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
& lt; meter & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:35 PM
이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
