您的位置:首页 > Web前端 > BootStrap

Bootstrap 3的材料设计

2020-08-05 13:43 1121 查看

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/

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: