부트스트랩 프론트엔드 프레임워크의 사용 예를 요약합니다.
- 零下一度원래의
- 2017-06-24 14:16:452348검색
1. 부트스트랩 조판
글로벌 스타일 style.css:
1. 본문의 여백 문을 제거합니다
2. 본문의 배경색을 흰색으로 설정합니다
3. 조판을 위한 높이
4. 전역 링크 색상을 설정하고, 링크가 ":hover" 상태일 때만 밑줄 스타일이 표시됩니다.
Title h1-h6
HTML의 모든 제목 태그,
사용할 수 있습니다. 또한 인라인 속성의 텍스트에 제목 스타일을 제공하기 위해 .h1 ~ .h6 클래스 선택기가 제공됩니다.
1. margin-top 및 margin-bottom
2의 값을 재설정합니다. h1~h3의 재설정 값은 모두 20px이고, h4~h6의 재설정 값은 모두 10px
3입니다. 모든 제목 줄 높이는 1.1(즉, 글꼴 크기의 1.1배)이고 텍스트 색상과 글꼴은 상위 요소의 색상과 글꼴을 상속합니다
4 다양한 수준에서 제목의 글꼴 크기를 수정했습니다(h1=). 36px, h2=30px, h3= 24px, h4=18px, h5=14px 및 h6=12px
제목에는 태그가 포함되거나 부제를 표시하는 데 사용할 수 있는 .small 클래스의 요소가 제공될 수도 있습니다. .
<h2>Bootstrap heading <small>Secondary Text</small></h2>
Bootstrap 제목 2671b4d4b9901ac62384a197b51f92c1 보조 텍스트7552a991a706bdbcb00625c14ce34064
p 태그
(단락) 요소도 하단 여백 10px로 설정됩니다.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
.lead 클래스를 추가하여 단락을 강조 표시할 수 있습니다.
b9e65200126209438507c030bae1f255
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur Ridiculus mus. vehicula.
bc5574f69a0cba105bc93bd3dc13c4ec
내용을 강조하는 라벨
8c836cae9a587cbdfa9d25493fcc3e25일반적으로 단락 태그와 함께 사용됩니다
관련 클래스 강조
text-muted： 提示，使用浅灰色（#999）text-primary：主要，使用蓝色（#428bca）text-success：成功，使用浅绿色(#3c763d)text-info： 通知信息，使用浅蓝色（#31708f）text-warning：警告，使用黄色（#8a6d3b）text-danger： 危险，使用褐色（#a94442）
텍스트 정렬 스타일
text-left： 左对齐 text-center： 居中对齐 text-right： 右对齐 text-justify：两端对齐
List
1 , ul, ol 73b597b9c5e6d5ba87af8e04a3fe41c3Desequence54bdf357c58b8a65c66d7c19c8e4d114:
class=“list-unstyled“
2, ul, ol 73b597b9c5e6d5ba87af8e04a3fe41c3가로 정렬 54bdf357c58b8a65c66d7c19c8e4d114 ; (세로 목록을 가로 목록으로 변경하고 글머리 기호(숫자)를 제거하고 가로 표시를 유지합니다.)
class=“list-inline”
3. dl 가로 목록 (화면이 768px보다 큰 경우 클래스 이름 ".dl-horizontal" 추가) " "는 수평 정의 목록 효과만 있음)
class=“dl-horizontal”
Pictures
사용 방법은 매우 간단합니다. 해당 클래스 이름을
태그에 추가하기만 하면 됩니다.
img-반응형: 반응형 그림, 주로 반응형 디자인용
img-rounded： 圆角图片 img-circle： 圆形图片 img-thumbnail： 缩略图片
직접 추가하고 해당 효과를 확인하세요~~
bootstrap 아이콘
Bootstrap 프레임워크는 거의 200가지에 달하는 다양한 아이콘 이미지도 제공하며 이러한 아이콘은 모두 CSS3의 @font-face 속성을 사용하여 글꼴과 일치시킵니다. 아이콘 효과를 얻으세요.
모든 행 수준 요소를 사용할 수 있습니다. 일반적으로 스팬 태그는 아이콘 컨테이너로 사용됩니다.
7cda7d4b173f6b140d13745a8aab6ad2부트스트랩 웹사이트에서 볼 수 있습니다.span>
사용법은 다음과 같습니다. 매우 간단합니다. 영어를 클래스에 복사하여 붙여넣기만 하면 됩니다.
<span class="glyphicon glyphicon-ok"></span>
2. Bootstrap-table
기본 예
<table class="table"></table>
줄무늬 테이블
은 0c868b9843454ed73fa3af4384e48bcd의 각 행이 마우스 오버 상태에 응답하도록 할 수 있습니다.
Condensed table
.table-densed 클래스를 추가하면 테이블을 더 컴팩트하게 만들 수 있고 셀의 패딩도 절반으로 줄일 수 있습니다.
状态类
通过这些状态类可以为行或单元格设置颜色。
Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色.success 标识成功或积极的动作.info 标识普通的提示信息或动作.warning 标识警告或需要用户注意.danger 标识危险或潜在的带来负面影响的动作
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
<div class="table-responsive">
<table class="table">
...
</table>
</div>3、bootstrap表单
基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的 d5fd7aea971a85678ba271703566ebfd、4750256ae76b6b9d804861d8f69e79d3 和 221f08282418e2996498697df914ce4e 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列。
<form role="form">告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单</form><form role="button">告诉设备，这是个按钮，可以点击。本质上是增强语义性，增强组件的可访问性、可用性</form>
不要将表单组合输入框组混合使用，建议将输入框组嵌套到表单组中使用。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>多个控件可以排列在同一行:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>水平排列的表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
单选和多选框
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
设置了disabled属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 2e1cf0710519d5598b1f0f14c36ba674 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 2b5469ab79cf842344327415c3b3bb95。
多选框：
<div class="checkbox"> <label> <input type="checkbox" value="">
Option one is this and that—be sure to include why it's great </label></div>
<div class="checkbox disabled"> <label><input type="checkbox" value="" disabled>
Option two is disabled </label></div>单选框：
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
参考博文：bootstrap框架怎么用?
위 내용은 부트스트랩 프론트엔드 프레임워크의 사용 예를 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!