Bootstrap 3的材料设计
Material Design Bootstrap 3. Today we review Material Design Bootstrap 3 theme. This theme is a new skin for your website, in case if your website is built with the Bootstrap framework 3. The theme doesn’t affect the Bootstrap core. For ease of use – LESS/SASS version is provided. The standard class names are not changed, for maximum compatibility with the framework.
Material Design Bootstrap3。今天,我们回顾Material Design Bootstrap 3主题。 如果您的网站是使用Bootstrap框架3构建的,则此主题是您网站的新外观。该主题不会影响Bootstrap核心。 为了易于使用–提供了LESS / SASS版本。 不更改标准类名,以最大程度地与框架兼容。
Below we take a closer look at how you can use it.
下面我们仔细研究如何使用它。
版式 (Typography)
In the theme we used 2 main fonts: Roboto light and Roboto regular. To display titles we selected the following variations that are presented in the figure below
在主题中,我们使用了2种主要字体:Roboto light和Roboto Regular。 为了显示标题,我们选择了下图所示的以下变体
下拉式清单 (Drop-down lists)
All variations of the lists are customized and implemented in the theme. Pay attention to new classes : material_dropdown_btn, material_dropdown_menu and material_dropdown_menu_link. To use the list in your projects, you need to create the layout like below.
列表的所有变体都是在主题中定制和实现的。 注意新的类:material_dropdown_btn,material_dropdown_menu和material_dropdown_menu_link。 要在项目中使用列表,您需要创建如下所示的布局。
<button class="dropdown-toggle material_dropdown_btn" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu material_dropdown_menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="material_dropdown_menu_link">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="material_dropdown_menu_link">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="material_dropdown_menu_link">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="material_dropdown_menu_link">Separated link</a></li> </ul>
<button class="dropdown-toggle material_dropdown_btn" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu material_dropdown_menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="material_dropdown_menu_link">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="material_dropdown_menu_link">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="material_dropdown_menu_link">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="material_dropdown_menu_link">Separated link</a></li> </ul>[/code]
表单元素 (Form elements)
As is known, the most important UI elements are form elements: text inputs, textarea, radioboxes, checkboxes, switch buttons etc. The Bootstrap provides a lot of options to represent them: single buttons, group of button, buttons with drop-down lists, various states of the buttons and so on.
众所周知,最重要的UI元素是表单元素:文本输入,文本区域,单选框,复选框,切换按钮等。Bootstrap提供了许多表示它们的选项:单个按钮,一组按钮,带有下拉列表的按钮,按钮的各种状态等。
Below you can see how the form elements look like in the theme.
您可以在下面看到表单元素在主题中的外观。
<button type="button" class="btn btn-default material_btn">Button</button> <button type="button" class="btn btn-default material_btn material_btn_primary">Button</button> <button type="button" class="btn btn-default material_btn material_btn_success">Button</button> <button type="button" class="btn btn-default material_btn material_btn_info">Button</button> <button type="button" class="btn btn-default material_btn material_btn_warning">Button</button> <button type="button" class="btn btn-default material_btn material_btn_danger">Button</button>
<button type="button" class="btn btn-default material_btn">Button</button> <button type="button" class="btn btn-default material_btn material_btn_primary">Button</button> <button type="button" class="btn btn-default material_btn material_btn_success">Button</button> <button type="button" class="btn btn-default material_btn material_btn_info">Button</button> <button type="button" class="btn btn-default material_btn material_btn_warning">Button</button> <button type="button" class="btn btn-default material_btn material_btn_danger">Button</button>[/code]
<div class="material_checkbox_group"> <input type="checkbox" id="checkbox" name="checkbox" class="material_checkbox" /> <label class="material_label_checkbox" for="checkbox">Do you like it?</label> </div> <div class="material_checkbox_group"> <input type="checkbox" id="checkbox2" name="checkbox" class="material_checkbox material_checkbox_success" /> <label class="material_label_checkbox" for="checkbox2">Success</label> </div>
<div class="material_checkbox_group"> <input type="checkbox" id="checkbox" name="checkbox" class="material_checkbox" /> <label class="material_label_checkbox" for="checkbox">Do you like it?</label> </div> <div class="material_checkbox_group"> <input type="checkbox" id="checkbox2" name="checkbox" class="material_checkbox material_checkbox_success" /> <label class="material_label_checkbox" for="checkbox2">Success</label> </div>[/code]
导航元素 (Navigation elements)
There are several ways to create navigation in Bootstrap 3: Navbar, pils, pagination, breadcrumbs. Below you can find the breadcrumb and the navbar:
在Bootstrap 3中有几种创建导航的方法:Navbar,pils,分页,面包屑。 在下面,您可以找到面包屑和导航栏:
<ol class="breadcrumb material_breadcrumb"> <li><a href="#" class="material_breadcrumb_item">Home</a></li> <li><a href="#" class="material_breadcrumb_item">Library</a></li> <li class="active">Data</li> </ol>
<ol class="breadcrumb material_breadcrumb"> <li><a href="#" class="material_breadcrumb_item">Home</a></li> <li><a href="#" class="material_breadcrumb_item">Library</a></li> <li class="active">Data</li> </ol>[/code]
<nav class="navbar material_navbar material_navbar_danger"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand material_navbar_brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav material_navbar_nav"> <li class="active"><a href="#" class="material_navbar_nav_item">Link <span class="sr-only">(current)</span></a></li> <li><a href="#" class="material_navbar_nav_item">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu material_dropdown_menu" role="menu"> <li><a href="#" class="material_dropdown_menu_link">Action</a></li> <li><a href="#" class="material_dropdown_menu_link">Another action</a></li> <li><a href="#" class="material_dropdown_menu_link">Something else here</a></li> <li class="divider"></li> <li><a href="#" class="material_dropdown_menu_link">Separated link</a></li> <li class="divider"></li> <li><a href="#" class="material_dropdown_menu_link">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left material_navbar_form" role="search"> <div class="form-group materail_input_block"> <input type="text" class="form-control materail_input" placeholder="Search"> </div> <button type="submit" class="btn btn-default material_btn material_btn_sm">Submit</button> </form> <ul class="nav navbar-nav navbar-right material_navbar_nav"> <li><a href="#" class="material_navbar_nav_item">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu material_dropdown_menu" role="menu"> <li><a href="#" class="material_dropdown_menu_link">Action</a></li> <li><a href="#" class="material_dropdown_menu_link">Another action</a></li> <li><a href="#" class="material_dropdown_menu_link">Something else here</a></li> <li class="divider"></li> <li><a href="#" class="material_dropdown_menu_link">Separated link</a></li> </ul> </li> </ul> </div> </div> </nav>
<nav class="navbar material_navbar material_navbar_danger"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand material_navbar_brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav material_navbar_nav"> <li class="active"><a href="#" class="material_navbar_nav_item">Link <span class="sr-only">(current)</span></a></li> <li><a href="#" class="material_navbar_nav_item">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu material_dropdown_menu" role="menu"> <li><a href="#" class="material_dropdown_menu_link">Action</a></li> <li><a href="#" class="material_dropdown_menu_link">Another action</a></li> <li><a href="#" class="material_dropdown_menu_link">Something else here</a></li> <li class="divider"></li> <li><a href="#" class="material_dropdown_menu_link">Separated link</a></li> <li class="divider"></li> <li><a href="#" class="material_dropdown_menu_link">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left material_navbar_form" role="search"> <div class="form-group materail_input_block"> <input type="text" class="form-control materail_input" placeholder="Search"> </div> <button type="submit" class="btn btn-default material_btn material_btn_sm">Submit</button> </form> <ul class="nav navbar-nav navbar-right material_navbar_nav"> <li><a href="#" class="material_navbar_nav_item">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu material_dropdown_menu" role="menu"> <li><a href="#" class="material_dropdown_menu_link">Action</a></li> <li><a href="#" class="material_dropdown_menu_link">Another action</a></li> <li><a href="#" class="material_dropdown_menu_link">Something else here</a></li> <li class="divider"></li> <li><a href="#" class="material_dropdown_menu_link">Separated link</a></li> </ul> </li> </ul> </div> </div> </nav>[/code]
结论 (Conclusion)
If you like the Material Design theme, you can get it on GitHub
如果您喜欢Material Design主题,则可以在GitHub上获得它
翻译自: https://www.script-tutorials.com/material-design-for-bootstrap-3/
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1
- 材料设计Materials Studio教程(简易课程)
- bootstrap学习总结-css样式设计(二)
- 前端开发响应式设计之媒体查询(bootstrap)
- UML 类图 设计模式学习材料
- Android 材料设计
- 材料设计使用---BottomNavigation
- Android5.0材料设计(三)
- 11款扁平化设计的 Twitter Bootstrap 主题和模板
- Google iOS 材料设计: 入门
- Bootstrap使用响应式设计(Responsive design)时导航条上部有空白的解决方案
- 对谷歌自带闹钟应用中材料设计的吹毛求疵
- Design Guidelines-Resin information/设计指南-塑胶常用材料信息
- 谷歌设计风格的bootstrap整套模板-极简、优雅震撼你的视觉
- Bootstrap框架学习(四)——Bootstrap组件设计之下拉菜单与按钮
- MaterialUp - 寻找材料设计灵感必备的网站
- 使用bootstrap和metroui设计的微网站或手机app界面
- Bootstrap用户手册·设计响应式网站+中文版
- 15个最好的Bootstrap设计工具推荐
- 基于Bootstrap的网页设计实例