BootStrap学习笔记之BootStrap常用组件介绍

　　1、图标：

 

　　<h3>图标</h3>

 

　　<spanclass="glyphiconglyphicon-home"></span>

 

　　<spanclass="glyphiconglyphicon-signal"></span>

 

　　<spanclass="glyphiconglyphicon-cog"></span>

 

　　<spanclass="glyphiconglyphicon-apple"></span>

 

　　<spanclass="glyphiconglyphicon-trash"></span>

 

　　<spanclass="glyphiconglyphicon-play-circle"></span>

 

　　<spanclass="glyphiconglyphicon-headphones"></span>

 

　　2、按钮：

 

　　<h3>按钮</h3>

 

　　<buttontype="button"class="btnbtn-default">按钮</button>

 

　　<buttontype="button"class="btnbtn-primary">primary</button>

 

　　<buttontype="button"class="btnbtn-success">success</button>

 

　　<buttontype="button"class="btnbtn-info">info</button>

 

　　<buttontype="button"class="btnbtn-warning">warning</button>

 

　　<buttontype="button"class="btnbtn-danger">danger</button>

 

　　1.png

 

　　3、按钮尺寸：

 

　　<h3>按钮尺寸</h3>

 

　　<buttontype="button"class="btnbtn-default">按钮</button>

 

　　<buttontype="button"class="btnbtn-primarybtn-lg">primary</button>

 

　　<buttontype="button"class="btnbtn-successbtn-sm">success</button>

 

　　<buttontype="button"class="btnbtn-infobtn-xs">info</button>

 

　　4、把图标显示在按钮里：

 

　　<h3>把图标显示在按钮里</h3>

 

　　<buttontype="button"class="btnbtn-default"><spanclass="glyphiconglyphicon-home"></span>按钮</button>

 

　　5、下拉菜单：

 

　　<pclass="dropdown">

 

　　<buttonclass="btnbtn-primarydropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown"aria-haspopup="true"aria-expanded="true">

 

　　<spanid="dropdown-title">菜单一</span>

 

　　<spanclass="caret"></span>

 

　　</button>

 

　　<ulclass="dropdown-menu"aria-labelledby="dropdownMenu1">

 

　　<li><ahref="#"class="dropdown-item">菜单一</a></li>

 

　　<li><ahref="#"class="dropdown-item">菜单二</a></li>

 

　　<li><ahref="#"class="dropdown-item">菜单三</a></li>

 

　　</ul>

 

　　</p>

 

　　交互：监听每个菜单的点击事件，点击之后在title显示当前菜单

 

　　$('.dropdown-item').click(function(){

 

　　$('#dropdown-title').text($(this).text());

 

　　});

 

　　6、输入框：

 

　　<h3>输入框</h3>

 

　　<pclass="input-group">

 

　　<spanclass="glyphiconglyphicon-user"></span>

 

　　<inputtype="text"placeholder="username">

 

　　</p>

 

　　<pclass="input-group">

 

　　<spanclass="glyphiconglyphicon-lock"></span>

 

　　<inputtype="password"placeholder="password">

 

　　</p>

 

　　7、导航栏：

 

　　

 

　　<h3>导航栏</h3>

 

　　<navclass="navbarnavbar-inversenavbar-fixed-top">

 

　　<pid="navbar"class="navbar-collapsecollapse">

 

　　<ulclass="navnavbar-nav">

 

　　<liclass="active"><ahref="#">Home</a></li>

 

　　<li><ahref="#about">About</a></li>

 

　　<li><ahref="#contact">Contact</a></li>

 

　　<liclass="dropdown">

 

　　<ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-expanded="false">Dropdown<spanclass="caret"></span></a>

 

　　<ulclass="dropdown-menu"role="menu">

 

　　<li><ahref="#">Action</a></li>

 

　　<li><ahref="#">Anotheraction</a></li>

 

　　<liclass="pider"></li>

 

　　<liclass="dropdown-header">Navheader</li>

 

　　<li><ahref="#">Separatedlink</a></li>

 

　　</ul>

 

　　</li>

 

　　</ul>

 

　　</p><!--/.nav-collapse-->

 

　　</p>

 

　　</nav>

 

　　8、表单：

 

　　

 

　　<h3>表单</h3>

 

　　<form>

 

　　<pclass="form-group">

 

　　<spanclass="glyphiconglyphicon-user"></span>

 

　　<inputtype="email"id="exampleInputEmail1"placeholder="Enteremail">

 

　　</p>

 

　　<pclass="form-group">

 

　　<spanclass="glyphiconglyphicon-lock"></span>

 

　　<inputtype="password"id="exampleInputPassword1"placeholder="Password">

 

　　</p>

 

　　<pclass="form-group">

 

　　<labelfor="exampleInputFile">Fileinput</label>

 

　　<inputtype="file"id="exampleInputFile">

 

　　<pclass="help-block">Exampleblock-levelhelptexthere.</p>

 

　　</p>

 

　　<pclass="checkbox">

 

　　<label>

 

　　<inputtype="checkbox">Checkmeout

 

　　</label>

 

　　</p>

 

　　<buttontype="submit"class="btnbtn-default">Submit</button>

 

　　</form>

 

　　9、警告框：

 

　　

 

　　<h3>警告框</h3>

 

　　<pclass="alertalert-warningalert-dismissible"role="alert">

 

　　<buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</span></button>

 

　　<strong>Warning!</strong>Bettercheckyourself,you'renotlookingtoogood.

 

　　</p>

 

　　<pclass="alertalert-success"role="alert">

 

　　<ahref="#"class="alert-link">success!</a>

 

　　</p>

 

　　<pclass="alertalert-info"role="alert">

 

　　<ahref="#"class="alert-link">info!</a>

 

　　</p>

 

　　<pclass="alertalert-warning"role="alert">

 

　　<ahref="#"class="alert-link">warning!</a>

 

　　</p>

 

　　<pclass="alertalert-danger"role="alert">

 

　　<ahref="#"class="alert-link">danger!</a>

 

　　</p>

 

　　10、进度条：

 

　　<h3>进度条</h3>

 

　　<pclass="progress">

 

　　<pclass="progress-bar"role="progressbar"aria-valuenow="70"aria-valuemin="0"aria-valuemax="100"style="width:60%;">

 

　　70%

 

　　</p>

 

　　</p>

 

　　11、靠右排列

 

　　一般我们是用float:right来实现向右浮动的功能的，但是这里面右涉及了清除浮动、调整右边的margin、上下的margin等等问题，在bootstrap当然要用他的方法，只要添加一个class：pull-right就可以解决：

 

　　<spanstyle="font-size:30px;">item1</span>

 

　　<pclass="pull-right">item2</p>

 

　　这第一行是要跟第二行在一个水平线上的，所以第一行不能用<h1>之类的，因为这种元素自带换行功能。

 

　　12、tab的使用

 

　　tab可以方便的在一个页面里面切换显示的内容，bootstrap的tab使用非常简单：

 

　　

 

　　<ulid="myTab"class="navnav-tabs">

 

　　<lirole="presentation"class="active"><ahref="#tab1"data-toggle="tab">tab1</a></li>

 

　　<lirole="presentation"><ahref="#tab2"data-toggle="tab">tab2</a></li>

 

　　<lirole="presentation"><ahref="#tab3"data-toggle="tab">tab3</a></li>

 

　　</ul>

 

　　<span>这是宝贝管理页面</span>

 

　　<pid="myTabContent"class="tab-content">

 

　　<pid="tab1"class="tab-paneactive">

 

　　<p>这是tab1</p>

 

　　</p>

 

　　<pid="tab2"class="tab-pane">

 

　　<p>这是tab2</p>

 

　　</p>

 

　　<pid="tab3"class="tab-pane">

 

　　<p>这是tab3</p>

 

　　</p>

 

　　</p>

 

　　在js可以方便的捕捉tab的切换，并做出相应的改变，比如当第二个页面是加载一些数据，那么我等到切换到第二个页面我再去加载：

 

　　$('a[data-toggle="tab"]').on('shown.bs.tab',function(e){

 

　　varactiveTab=$(e.target).text();

 

　　alert(activeTab);

 

　　});

 

　　13、bootstrap-table

 

　　一个可以通过ajax请求json数据并生成表格的插件

 

　　项目地址：

 

　　https://github.com/wenzhixin/bootstrap-table

 

　　14、通知消息组件

 

　　<1>下载地址：

 

　　https://github.com/CodeSeven/toastr

 

　　<2>文档：

 

　　http://www.ithao123.cn/content-2414918.html

 

　　<3>引入：

 

　　在下载的文件里找到build文件夹，引入里面的toastr.min.js和toastr.css

 

　　<4>使用：

 

　　此提示消息默认是显示在浏览器的右上角，我们可以在初始化里面改为顶部居中显示：

 

　　toastr.options.positionClass='toast-top-center';//显示位置

 

　　位置显示的设定有如下选项：

 

　　toast-top-right

 

　　toast-botton-right

 

　　toash-bottom-left

 

　　toast-top-left

 

　　toast-top-full-width这个是在网页顶端，宽度铺满整个屏幕

 

　　toast-bottom-full-width

 

　　toast-top-center顶端中间

 

　　toast-bottom-center

 

　　然后在我们需要显示的时候这样调用就行了：

 

　　toastr.success('提交数据成功');

 

　　toastr.error('Error');

 

　　toastr.warning('只能选择一行进行编辑');

 

　　toastr.info('info');

 

　　15、ajax请求

 

　　按钮：

 

　　<buttonclass="btnbtn-link">

 

　　换个密码

 

　　</button>

 

　　js：

 

　　$('.btn').on('click',function(){

 

　　$.post('xxx')

 

　　.done(function(result){

 

　　varjson=ajaxResultShow(result);

 

　　if(json.result_code==0)

 

　　$('#pwdId').text(json.data1);

 

　　})

 

　　.fail(function(){

 

　　})

 

　　.always(function(){

 

　　});

 

　　});

 

　　16、bootstrap-switch

 

　　（1）此组件不属于bootstrap，他需要单独引入bootstrap-switch.min.js和bootstrap-switch.min.css；

 

　　（2）下载地址：http://www.bootcss.com/p/bootstrap-switch/

 

　　（3）使用方法：

 

　　添加框架：

 

　　<linkhref="bootstrap.css"rel="stylesheet">

 

　　<linkhref="bootstrap-switch.css"rel="stylesheet">

 

　　<scriptsrc="jquery.js"></script>

 

　　<scriptsrc="bootstrap-switch.js"></script>

 

　　在html中添加组件：

 

　　<inputtype="checkbox"name="my-checkbox"checked>

 

　　在js中初始化：

 

　　$("[name='my-checkbox']").bootstrapSwitch();

 

　　可以在初始化中直接对状态进行设定：

 

　　$("#isOpenCheckbox").bootstrapSwitch('state',false);

 

　　切换状态：

 

　　$('#isOpenCheckbox').bootstrapSwitch('toggleState');

 

　　监听切换事件：

 

　　$('#isOpenCheckbox').on('switchChange.bootstrapSwitch',function(event,state){

 

　　alert(state);//true||false

 

　　});

 

　　总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。