Bootstarp_javascript 기술에서 CSS를 사용하는 방법
- WBOY원래의
- 2016-05-16 15:15:111273검색
Bootstrap은 일부 HTML5 요소와 CSS 속성을 사용하므로 HTML5 문서 유형을 사용해야 합니다.
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
Bootstrap에서 개발한 웹사이트를 모바일 친화적으로 만들고 적절한 그리기 및 터치스크린 크기 조정을 보장하려면 아래와 같이 웹페이지 헤드에 뷰포트 메타 태그를 추가해야 합니다.
<meta name="viewport" content="width=device-width, //视口宽度为设备宽度
initial-scale=1.0, //缩放程度
maximum-scale=1.0, //最大缩放级别（可选）
user-scalable=no">//禁止页面缩放（可选）
Bootstrap은 Normalize를 사용하여 브라우저 간 일관성을 설정합니다. Normalize.css는 HTML 요소의 기본 스타일에 더 나은 브라우저 간 일관성을 제공하는 작은 CSS 파일입니다.
레이아웃 정보
Bootstrap은 화면이나 뷰포트 크기가 증가함에 따라 자동으로 최대 12개의 열로 분할되는 반응형 모바일 우선 유동 그리드 시스템을 제공합니다.
img-반응형은 img 요소에 사용됩니다.
페이지의 콘텐츠를 래핑하는 데 사용되는 컨테이너 요소
- 행은 컨테이너에 배치되어야 하며 수평 열 그룹을 만드는 데 사용됩니다.
- .row 및 .col-xs-4와 같은 사전 정의된 그리드 클래스를 사용하여 그리드 레이아웃을 빠르게 생성할 수 있습니다.
- 행과 열은 서로 중첩될 수 있으며 중첩 후 조정은 장치 너비가 아닌 상위 요소를 기반으로 합니다
-
3개의 동일한 열을 만들려면 3개의 col-xs-4를 사용하거나 12개의 열에 12개의 col-xs-1을 사용하세요.
<div class="container"> <div class="row"> <div class="col-xs-6 col-md-2 col-md-offset-1"></div> <div class="col-xs-6 col-md-3"></div> <div class="col-xs-6 col-md-3"></div> <div class="col-xs-6 col-md-3"></div> </div> <div class="row">...</div> </div> <div class="container">.... <!--以上代码在手机上就是两行两列，在电脑上是一行四列，其中第一列前面有空白，比其它列宽度小三分之一--> //可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示，col-md-push-6按照我个人的理解，是在左面浮动了6列，然后再插入元素，col-md-pull-3则是在右边浮动了3列，然后从右往左插入元素
- 미디어 쿼리는 매우 멋진 "조건부 CSS 규칙"입니다. 특정 특정 조건에 따라 일부 CSS에서만 작동합니다. 해당 조건이 충족되면 해당 스타일이 적용됩니다.
@media (최소 너비: @screen-sm-min) 및 (최대 너비: @screen-sm-max) { ... }
//최소 너비: @screen-sm-min을 사용하는 모든 장치의 경우 화면 너비가 @screen-sm-max보다 작으면 일부 처리가 수행됩니다.
조판에 대하여
-
텍스트 소개
<small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内，并呈现为斜体</em><br> <p class="text-left">向左对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-right">向右对齐文本</p> <p class="text-muted">本行内容是减弱的</p>灰 <p class="text-primary">本行内容带有一个 primary class</p>蓝 <p class="text-success">本行内容带有一个 success class</p>绿 <p class="text-info">本行内容带有一个 info class</p>深蓝 <p class="text-warning">本行内容带有一个 warning class</p>黄 <p class="text-danger">本行内容带有一个 danger class</p>红
Bootstrap은 8a7974376be5f6c00c121222b727adb9 요소의 스타일을 텍스트 하단에 표시되는 점선 테두리로 정의하며, 해당 요소 위에 마우스를 올리면 전체 텍스트가 나타납니다(4c76921bfe0edd25e29a726ad371699f 제목 속성). 텍스트의 글꼴 크기를 더 작게 하려면 8a7974376be5f6c00c121222b727adb9에 .initialism을 추가하세요.
<abbr title="World Wide Web">WWW</abbr><br> <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
- d055f32558c28841e6947ebb9d53d49f 태그를 사용하면 웹페이지에 연락처 정보를 표시할 수 있습니다.
- 6713b4b502997f282feadedbb7e25728 태그를 인용문으로 사용하세요
<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
- list-unstyled는 스타일이 지정되지 않은 목록 ul에 사용되고 list-inline은 가로 목록 ul에 사용됩니다
- 사전 스크롤 가능을 통해 사전 스크롤 가능
-
ffbe95d20f3893062224282accb13e8f 코드를 인라인으로 표시하고 e03b848252eb9375d56be284e690e873는 여러 줄의 코드를 표시합니다
양식에 대하여
모든 .table을 .table 반응형 클래스로 래핑하면 작은 기기(768px 미만)에 맞게 테이블을 가로로 스크롤할 수 있습니다. 너비가 768px보다 큰 대형 장치에서 볼 때 아무런 차이가 없습니다.
<div class="table-responsive"> <table class="table"> <caption>响应式表格布局</caption> <thead> <tr> <th>产品</th> <th>付款日期</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>产品1</td> <td>23/11/2013</td> <td>待发货</td> </tr> </tbody> </table> </div>
양식에 대하여
- form에 role="form" 속성을 추가하면 Bootstrap의 기본 폼 구조가 적용됩니다. 이때 기본값은 세로 형식입니다
- 레이블과 컨트롤을 .form-group 클래스를 사용하여 dc6dce4a544fdca2df29d5ac0ea9906b에 넣습니다. 이는 최적의 간격을 확보하는 데 필요합니다.
-
모든 텍스트 요소 d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3 및 221f08282418e2996498697df914ce4e에 클래스 .form-control을 추가합니다.
<input type="text" class="form-control" placeholder="文本输入"/> <textarea class="form-control" rows="3"></textarea> <label for="name">可多选的选择列表</label> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
- 在form加上类calss=form-inline，那么表单元素就会变成内联的
- 在form加上类class=form-horizontal，那么表单元素就会变成水平的
1）设置表单控件padding和margin值
2）改变“form-group”的表现形式，类似于网格系统的“row”。
3）向标签添加 class .control-label。
- 复选框和单选框
1）对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
- 当您需要在一个水平表单内的表单标签后放置纯文本时，请在 e388a4556c0f65e1904146cc1a846bee 上使用 class .form-control-static。
- 禁用的输入框 input，如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性
- 对 2b5469ab79cf842344327415c3b3bb95 添加 disabled 属性来禁用 2b5469ab79cf842344327415c3b3bb95 内的所有控件。
- Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
- .input-lg 和.input-sm可以改变输入框的高度样式
-
help-block Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 d5fd7aea971a85678ba271703566ebfd 后使用 .help-block。
<input class="form-control" type="text" placeholder=""> <span class="help-block">一个较长的帮助文本块，超过一行， 需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
关于按钮
<button type="button" class="btn btn-default">默认按钮</button> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button> <!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button> <!-- 信息警告消息的上下文按钮 --> <button type="button" class="btn btn-info">信息按钮</button> <!-- 表示应谨慎采取的动作 --> <button type="button" class="btn btn-warning">警告按钮</button> <!-- 表示一个危险的或潜在的负面动作 --> <button type="button" class="btn btn-danger">危险按钮</button> <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 --> <button type="button" class="btn btn-link">链接按钮</button>
按钮的大小
<p> <button type="button" class="btn btn-primary btn-lg"> 大的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary"> 默认大小的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-sm"> 小的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-xs"> 特别小的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-lg btn-block"> 块级的原始按钮 </button> </p>
- class为active表示激活按钮
- class为disabled表示禁用按钮
在a和input上使用按钮class也能弄成按钮的样子，但是考虑到跨浏览器的问题还是在button上比较好。
关于图片
关于图片的样式除了之前提到的img-responsive用于图片的自适应之外还有以下三个样式：
- .img-rounded 圆角图片
- .img-circle 圆形图片
- .img-thumbnail 缩略图功能
关于其它样式类
- .pull-left左浮动
- .pull-right右浮动
- center-block内容居中
- .clearfix清除浮动
- .caret显示下拉式
-
.close关闭图标
关于不同设备
以上就是Bootstarp中CSS的使用方法，希望大家会喜欢。