您的位置: 首页 > IT文章 > bootstrap系统学习

bootstrap系统学习

分类: IT文章 • 2022-03-30 21:06:04

bootstrap系统学习

1.响应式中注意的内容：

一行(row)必须在.container中。

col-xs-

col-sm-

col-md-

col-lg-

列偏移 .col-md-offset-*

列排序 .col-md-push-* .col-md-pull-*

2.文本排版

h1-h6 类h1-h6

强调文本 small strong em cite b和strong一样吧

缩略语 abbr

地址元素 address

引用 blockquote

3.代码：

<code>显示单行内联代码

<kbd>显示用户输入代码

<pre>多行代码块

<var>变量

<samp>程序结果

4.链表ul li

去点列表 .list-unstyled

内联列表.list_inline

水平列表dl.dl-horizontal

5.table

带背条纹表格.table-striped

带边框.table-border

紧凑.table-condensed

悬停.table-hover

行样式 .active .success .info

6. 表单

.form-control

.form-group

在form上应用.form-horizontal

control-label

<form class="form-horizontal" role="from">
                <div class="form-group">
                    <label class=" col-sm-2 control-label">用户名:</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control"/>
                    </div>
                </div>
</form>

单选和复选框

<div class="radio">
   <label><input type="radio" name="sex" value="M" />男</label>
</div>
<div class="checkbox">
   <label><input type="checkbox" />中国</label>
</div>

has-success has-error

<div class="form-group has-success">
                  <label class="control-label" for="inputSuccess1">Input with success</label>
                  <input type="text" class="form-control" id="inputSuccess1">
</div>

控件的状态：

焦点状态 autofocus

禁用状态 disabled

被禁用的 fieldset

只读状态 readonly

校验状态

7.如果想在文本框的右侧添加一个小图标的话，那么需要一个has-feedback 和form-control-feedback.

bootstrap系统学习

<div class="form-group has-feedback">
        <label>用户名:</label>
        <input type="text" class="form-control" name="name" placeholder="输入用户名" />
        <span class="glyphicon glyphicon-eye-open form-control-feedback" aria-hidden="true"></span>
</div>

8.sr-only

如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。

9.图片 img标签

自适应：img-responsive

圆角：img-rounded

圆：img-circle

边上有一圈白线：img-thumbnail

10.关于字体和背景的样式。

text-info

text-warning

text-primary

text-danger

bg-lg

11.关闭按钮：

12.小的下拉三角。

13.utf-8和viewport还是记住吧。

<!DOCTYPE html>

14.pull-left的本质是：

float: left!important;

pull-right的本质是：

float: right!important;

15.清楚浮动clearfix

16.小屏可见visible-sm 小屏影藏hidden-sm

17.一个btn-toolbar里边可能含有多个btn-group 而btn-group里边可能含有多个btn。

18.

19.下拉框

bootstrap系统学习

<div class="dropdown">
                <button type="button" class="btn btn-danger" data-toggle="dropdown" >
                            <span class="glyphicon glyphicon-user"></span>
                            用户
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-left">
                    <li class="dropdown-header">文件管理</li>
                    <li class="active"><a href="#">
                        <span class="glyphicon glyphicon-off"></span>
                        文件</a></li>
                    <li class="disabled"><a  href="#">Disabled link</a></li>
                    <li><a href="#">文件</a></li>
                    <li class="divider"></li>
                    <li><a href="#">文件</a></li>
                </ul>
                
            </div>

View Code

20.下拉菜单，按钮和后边的下路图标是两个按钮

bootstrap系统学习

21. input输入框左右加标签的input-group-addon.

bootstrap系统学习

22.

bootstrap系统学习

<div class="input-group input-group-sm">
　　 <span class="input-group-addon">
     <input type="checkbox" />
    </span>
    <input type="text" class="form-control" />
</div>

　　 bootstrap系统学习

<div class="input-group">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-danger">OK</button>
                    <button type="button" class="btn btn-danger">OK</button>
                    <button type="button" class="btn btn-danger">OK</button>
                </span>
                <input type="text" class="form-control" />
</div>

bootstrap系统学习

<div class="input-group">
              　　<div class="input-group-btn">
                     <button type="button" 
                     class="btn btn-default dropdown-toggle"
                     data-toggle="dropdown">
                         Action
                        <span class="caret"></span>
                     </button>
                     <ul class="dropdown-menu">
                         <li><a href="#">项目</a></li>
                         <li><a href="#">项目</a></li>
                         <li><a href="#">项目</a></li>
                     </ul>
                </div>
                <input type="text" class="form-control" />
 </div>

23.导航

bootstrap系统学习

<div class="container">
		  <h1>选项卡</h1>
		  <ul class="nav nav-tabs">
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
				<li class="disabled"><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
		  </ul>
		  <h1>胶囊式</h1>
		  <ul class="nav nav-pills">
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
				<li class="disabled"><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
		  </ul>
		    <h1>胶囊式竖直</h1>
		  <ul class="nav nav-pills nav-stacked">
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
				<li class="nav-divider"></li>
				<li class="disabled"><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
		  </ul>
		  <h1>自适应</h1>
		   <ul class="nav nav-tabs nav-justified">
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
				<li class="disabled"><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
		  </ul>
		  
		    <h1>二级导航</h1>
		   <ul class="nav nav-tabs">
				<li class="active"><a href="#">首页</a></li>
				<li>
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">首页<span class="caret"></span></a>
				    <ul class="dropdown-menu">
				    	<li><a href="#">Items</a></li>
				    	<li><a href="#">Items</a></li>
				    	<li><a href="#">Items</a></li>
				    </ul>
				</li>
				<li class="disabled"><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
		  </ul>
		</div>

　24.

bootstrap系统学习

<h1>基础导航</h1>
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li class="disabled"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
          </ul>
            
        </nav>
        
        <h1>导航 中加表单</h1>
            <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li class="disabled"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
          </ul>
            
            <form class="navbar-form navbar-right" style="margin-right: 20px;">
                <div class="form-group">
                    <input type="text"  class="form-control"/>
                </div>
                <button type="button" class="btn btn-danger">搜索</button>
            </form>
        </nav>
        <h1>导航 中加文本、链接、按钮</h1>
                <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li class="disabled"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
          </ul>
            <p class="navbar-text">文本</p>
            <a href="#" class="navbar-link">链接</a>
            <button type="button" class="btn btn-default navbar-btn">按钮</button>
            
        </nav>
        
            <h1>顶部固定</h1>
            <nav class="navbar navbar-default navbar-fixed-top">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li class="disabled"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
          </ul>
            <p class="navbar-text">文本</p>
            <a href="#" class="navbar-link">链接</a>
            <button type="button" class="btn btn-default navbar-btn">按钮</button>
            
        </nav>
        
        <h1>合屏方角导航</h1>
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li class="disabled"><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
          </ul>
            
        </nav>

25.

bootstrap系统学习

<ul class="breadcrumb">
                 <li><a href="#">首页</a></li>
                  <li><a href="#">新闻</a></li>
                  <li><a href="#">国内新闻</a></li>
                  <li><a href="#">高考专题</a></li>
          </ul>
          
          <hr/>
              <ul class=" pagination pagination-lg">
                 <li><a href="#">&laquo;</a></li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li><a href="#">6</a></li>
                  <li><a href="#">&raquo;</a></li>
          </ul>
              <ul class=" pagination">
                 <li><a href="#">&laquo;</a></li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li><a href="#">6</a></li>
                  <li><a href="#">&raquo;</a></li>
          </ul>
            <ul class=" pagination pagination-sm">
                 <li><a href="#">&laquo;</a></li>
                  <li class="active"><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li><a href="#">6</a></li>
                  <li><a href="#">&raquo;</a></li>
          </ul>
          <hr />
          <ul class="pager">
              <li class="active"><a href="">上一页</a></li>  
                  <li><a href="">下一页</a></li>  
          </ul>
    </body>

26.

bootstrap系统学习

bootstrap系统学习

相关推荐