【前端】Bootstrap框架入门2

发布时间:2018-08-01 13:44:00

1.Bootstrap入门

Bootstrap是Twitter公司于2011年8月开源的整体式前端框架,由Twitter的设计 Mark Otto 和 Jacob Thornton合作开发。

        Bootstrap是当前应用最广泛、最为开发者所熟知的前端框架。

2.按钮组:用于把一组按钮放在同一行

基本用法:将一组按钮包裹在<div class="btn-group">…</div>内即可。

按钮组还支持 垂直排列、两端对齐、嵌套。

3.input控件:包裹在<div class="input-group">…</div>中

       (1)搜索框:input+按钮。按钮包裹在<span class="input-group-btn">中。

       (2)搜索框2:input搭配用于说明的文字或图片。将文字或图片包裹在<span class==“input-group-addon”>中即可。

4.导航

       (1)胶囊式导航:一般用于平级的选项列表。实质为<ul>,为<ul>添加 .nav 和 .nav-pills 类即可(横向)。纵向胶囊式导航,再添加 .nav-stacked 类即可。

       (2) 面包屑导航:一般用于有层级关系的选项列表。为<ul>元素或<ol>元素添加 .breadcrumb 类实现。

       (3)头部导航:绝大多数网站首页的页头部分都会放置一个针对主要内容的导航,便于用户快速了解网站内容和结构。


远近互联前端小华整理发布,希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。


【相关推荐】