Bootstrap基础知识(Day 2)

Bootstrap基础知识(Day 1)

偏移

偏移 offset

注意:只能向右偏移

语法: Col-xs/sm/md/lg-offset-数值

Col-md-offset-2 pc中等屏幕向右偏移 2个列

排序(了解)

语法:col-xs/sm/md/lg-pull 向左偏移

Col-xs/sm/md/lg-push 向右偏移

辅助样式

情境文本颜色

.text-muted(柔和) .text-success .text-info .text-primary .text-warning .text-danger

背景文本颜色 .bg-success .bg-info .bg-primary .bg-waring .bg-danger

下拉三角 <span class=”caret”></span>

快速浮动 pull-left 左浮动 pull-right 右浮动

清除浮动 .clearfix 给父盒子加就相当—-<div style=”clear:both”></div>

参考资料:http://v3.bootcss.com/examples/theme/

表单

.form-control 给输入框加<input> <textarea></textarea>

.form-group 给输入框的父元素加 ,给外面包含的盒子加<div class=”form-group”>

<div class="form-group">
    <label for="tel">手机</label>
    <input type="text" name="tel" id="tel" class="form-control">
</div>

.checkbox-inline 给label 标签加 给包含<input >和内容加样式

.radio-inline 给label 标签加,给<input >和内容加样式

<div class="form-group">
    <label class="checkbox-inline"><input type="checkbox" name="hobby">唱歌</label>
    <label class="checkbox-inline"><input type="checkbox" name="travel">旅游 </label>
    <label class="checkbox-inline"><input type="checkbox" name="sleep">睡觉</label>
    <label class="checkbox-inline disabled"><input type="checkbox" name="coding" disabled>敲代码</label>
</div>
<div class="form-group">
    <label class="radio-inline"><input type="radio" name="sex" value="男">男</label>
    <label class="radio-inline disabled" ><input type="radio" name="sex" value="女" disabled="">女</label>
</div>

输入框组

.input-group-addon 给给组合的内容加

.input-group 给父元素加

Bootstrap基础知识

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon" ><span class="glyphicon glyphicon-search"></span></span>
        <input type="search" name="search" id="search" class="form-control">
    </div>
</div>
<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon" ><span class="glyphicon glyphicon-user"></span></span>
        <input type="search" name="search" id="search" class="form-control">
    </div>
</div>
<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon" ><span class="glyphicon glyphicon-lock"></span></span>
        <input type="search" name="search" id="search" class="form-control">
    </div>
</div>

表单行内显示

给表单加 .form-inline

 

<form class="form-inline">

.form-horizontal 给表单加<form>

变成响应式效果 —必须结合栅格系统

注意:输入框不能使用栅格系统,给<div ><span>…给这类的标签加

按钮

可以加按钮效果的有哪些标签

<input type=”button” value=”按钮”>

<button>按钮</button>

<a href=”#”>内容</a>

.btn 是按钮样式的基类

按钮样式 .btn-primary .btn-default .btn-success .btn-warning .btn-danger

按钮的大小 .btn-lg(最大的) .btn-sm .btn-xs (最小的)

按钮组 给父元素加 .btn-group

缩略图

下拉菜单
  • .dropdown-menu 给下拉列表中的内容给 ul加样式
  • .dropdown 包含触发的按钮和下拉列表加样式 —父元素
  • .Data-toggle 按钮的触发器
  • .dropdown-menu-left 下拉列表的对齐 .dropdown-menu-right 右对齐
  • .divider 给 <li>加 <li></li>之间没有内容

标签页

.nav 是标签页的一个基类 —给ul加

.nav-tabs 普通标签页

.nav-pills 胶囊式标签页

. nav-stacked 垂直排列

.active 给<li>加默认显示的是哪个标签页内容

导航栏
  • navbar:导航栏的基类,用于<nav>元素。
  • .navbar-default:导航栏默认样式,用于<nav>元素。
  • .container是<nav>的子元素。导航栏内容都放入其中。
  • .navbar-header:导航栏头部样式。
  • .collapse是折叠导航栏的样式的基类。列表<ul>父元素加
  • .navbar-collapse是折叠导航栏样式。 给ul的父元素加
  • .nav是导航栏的链接基类。<ul>
  • .navbar-nav是导航栏的链接样式 。<ul>
  • .navbar-left 或 .navbar-right :组件排列。导航链接、按钮或文本对齐。
  • .navbar-fixed-top:导航栏固定在顶部,用于<nav>元素。需要为<body>设置padding-top:70px
  • .navbar-fixed-bottom:导航栏固定在底部,用于<nav>元素
  • .navbar-inverse:可以实现反色导航栏,用于<nav>元素。

 

分页

参考资料 :
1.全局 CSS 样式
2.组件
3.Bootstrap IE6 兼容库

 

金超超(Word2013)

金超超(Word2013)

Hello, my name is Kim, from Shuren University. I can speak English, Chinese of course, and Japanese. 私は 超超 と申します、26歳の会社員 です。よろしくお願いします。

您可能还喜欢...

发表评论

电子邮件地址不会被公开。